एक एचटीएमएल संख्या इनपुट हमेशा 2 दशमलव स्थानों को प्रदर्शित करें

Question

मैं एक ऐसा फॉर्म बना रहा हूं जहां उपयोगकर्ता एक HTML नंबर इनपुट टैग का उपयोग कर डॉलर राशि दर्ज कर सके। क्या इनपुट बॉक्स हमेशा 2 दशमलव स्थानों को प्रदर्शित करने का कोई तरीका है?

Answer 1

तो अगर इस पर किसी और stumbles यहाँ इस समस्या का हल है जावास्क्रिप्ट:

चरण 1: एक onchange घटना

myHTMLNumberInput.onchange = setTwoNumberDecimal; 

करने के लिए या html में अपने HTML संख्या इनपुट बॉक्स हुक कोड यदि आप ऐसा पसंद करते हैं

<input type="number" onchange="setTwoNumberDecimal" min="0" max="10" step="0.25" value="0.00" /> 

चरण 2: लिखें setTwoDecimalPlace विधि

function setTwoNumberDecimal(event) { 
    this.value = parseFloat(this.value).toFixed(2); 
} 

toFixed में '2' को बदल कर आप कम या ज्यादा दशमलव स्थानों के प्राप्त कर सकते हैं अगर आप ऐसा पसंद करते हैं।

Answer 2

जावास्क्रिप्ट संख्याओं के लिए toFixed में देखें। आप अपने नंबर फ़ील्ड के लिए onChange फ़ंक्शन लिख सकते हैं जो इनपुट पर फ़िक्स किया जाता है और नया मान सेट करता है।

Answer 3

शुद्ध एचटीएमएल जो आप चाहते हैं वह करने में सक्षम नहीं है। मेरा सुझाव आपके लिए roudning करने के लिए एक सरल जावास्क्रिप्ट समारोह लिखना होगा।

Answer 4

एक इनलाइन समाधान नीचे प्रारूप में Groot और इवायलो सुझाव को जोड़ती है:

onchange="(function(el){el.value=parseFloat(el.value).toFixed(2);})(this)" 

Answer 5

आप कार्यक्षमता का एक बहुत के लिए Telerik के numerictextbox उपयोग कर सकते हैं

<input id="account_rate" data-role="numerictextbox" data-format="#.000" data-min="0.001" data-max="100" data-decimals="3" data-spinners="false" data-bind="value: account_rate_value" onchange="APP.models.rates.buttons_state(true);" /> 

कोर कोड free to download

Answer 6

है यहां स्वीकृत समाधान गलत है। HTML में इस प्रयास करें:

onchange="setTwoNumberDecimal(this)" 

और समारोह की तरह लग रहे करने के लिए:

function setTwoNumberDecimal(el) { 
     el.value = parseFloat(el.value).toFixed(2); 
    }; 

Answer 7

क्या अन्य लोगों यहां पोस्ट मुख्य रूप से काम किया, लेकिन onchange का उपयोग कर काम नहीं करता है जब मैं तीर का उपयोग करके नंबर बदलने एक ही दिशा में एक से अधिक बार। काम क्या था oninput। मेरे कोड (मुख्य रूप से MC9000 से उधार):

एचटीएमएल

<input class="form-control" oninput="setTwoNumberDecimal(this)" step="0.01" value="0.00" type="number" name="item[amount]" id="item_amount"> 

जे एस

function setTwoNumberDecimal(el) { 
     el.value = parseFloat(el.value).toFixed(2); 
    };