मैं एचटीएमएल 5 नंबर फ़ील्ड को पिछला शून्य दिखा सकता हूं?

Question

मैं एक क्षेत्र है:

<input type='number' /> 

मैं 0.50 में पंच करने के लिए बिना यह 0.5 करने के लिए "यह सही करने" करना चाहते हैं, तो यह 0.50 नज़र आए।

Answer 1

मेरे पास इसके साथ थोड़ा सा खेल रहा है और spec को देखा है। यह कहता है कि यह एक वैध फ़्लोटिंग पॉइंट नंबर होना चाहिए।

संख्या के n के रूप में एक चल बिन्दु संख्या है स्ट्रिंग n के लिए जावास्क्रिप्ट ऑपरेटर ToString लागू करने से प्राप्त सबसे अच्छा प्रतिनिधित्व: वहाँ definition of a valid floating point number यह देता है जो मेरे ध्यान आकर्षित में एक वाक्य है।

इसका मतलब यह है कि प्रारूप हमेशा संख्या का आकलन करने के साथ संगत रहेगा, फिर उस नंबर पर जावास्क्रिप्ट के ट्रेसिंग का उपयोग करके। तो तब कोई पिछला 0s।

तो, आपको जावास्क्रिप्ट का सहारा लेना होगा। यह सीधा नहीं है क्योंकि document.getElementById('numInput').value = '0.50'; अभी भी 0.5 पर सही हो गया है, इसलिए सत्यापन onchange पर ट्रिगर नहीं किया गया है जहां डिफ़ॉल्ट कार्रवाई को रोका जा सकता है, यह आंतरिक रूप से ट्रिगर किया गया है।

यह सबसे अच्छा समाधान मैं के साथ आ सकता है ... यह एक हैक का एक सा है, और मजबूती के लिए सुधार करने का एक सा की आवश्यकता होगी है, लेकिन उम्मीद है कि यह तुम क्या चाहते करेंगे:

var numInput = document.getElementById('numInput'); 
numInput.addEventListener('keypress', function() { 
    this.setAttribute('type', 'text'); 
}); 
numInput.addEventListener('click', function() { 
    this.setAttribute('type', 'number'); 
}); 

तो यदि उपयोगकर्ता टाइप करके नंबर दर्ज करना चाहता है, तो यह इनपुट प्रकार को टेक्स्ट पर स्विच करता है, लेकिन जब वे इसे क्लिक करते हैं, तो यह इसे वापस एक नंबर पर परिवर्तित करता है।

आप हमेशा कोई बात नहीं क्या उपयोगकर्ता प्रकार अनुगामी 0s चाहते हैं, तो आप इसे कुछ इस तरह कर सकता है:

var numInput = document.getElementById('numInput'); 
numInput.addEventListener('blur', function() { 
    if (this.value === '') { 
     return; 
    } 
    this.setAttribute('type', 'text'); 
    if (this.value.indexOf('.') === -1) { 
     this.value = this.value + '.00'; 
    } 
    while (this.value.indexOf('.') > this.value.length - 3) { 
     this.value = this.value + '0'; 
    } 
}); 
numInput.addEventListener('focus', function() { 
    this.setAttribute('type', 'number'); 
}); 

संपादित करें: मुझे लगता है कि दूसरा समाधान क्या उपयोगकर्ता के साथ और अधिक इनलाइन है उम्मीद कर सकते हैं, लेकिन इसका मतलब है कि यदि उपयोगकर्ता 0.5 टाइप करता है तो इसे 0.50 पर ले जाया जाएगा, इसलिए यह निर्भर करता है कि आप यही चाहते हैं।

Answer 2

मैं संलग्न ('परिवर्तन') इनपुट करने के लिए घटना पर एक आप अनुगामी करना चाहते हैं 0 के

$('.number-input').on('change', function(){ 
    $(this).val(parseFloat($(this).val()).toFixed(2)); 
}); 

यह सिर्फ मूल्य लेता है, एक नाव के लिए डाले, एक स्ट्रिंग के लिए यह संख्या के लिए renders दशमलव स्थानों का, और इसे मूल्य के रूप में वापस रखता है।