<इनपुट प्रकार = "संख्या"> में 2 दशमलव स्थानों की अनुमति दें

Question

मेरे पास एक है <input type="number">और मैं उपयोगकर्ताओं के इनपुट को शुद्ध रूप से संख्याओं या संख्याओं के साथ 2 दशमलव स्थानों तक सीमित करना चाहता हूं।

असल में, मैं एक मूल्य इनपुट के लिए पूछ रहा हूँ।

मैं regex करने से बचना चाहता था। क्या इसे करने का कोई तरीका है?

<input type="number" required name="price" min="0" value="0" step="any">

Comments

प्रकार = "संख्या" में विस्तृत ब्राउज़र समर्थन नहीं है। यह सुनिश्चित करने के लिए कि आप वांछित इनपुट प्राप्त करने के लिए कुछ जावास्क्रिप्ट के साथ एक टेक्स्टबॉक्स का उपयोग करना बेहतर है।

— www139

हाँ, लेकिन आदानों वापस करने के लिए आते हैं type="text"वैसे भी, तो क्या यह फर्क पड़ता है?

— Ultimater

के संभावित डुप्लिकेट वहाँ एचटीएमएल 5 में एक नाव इनपुट प्रकार है?

— OhadR

/^\d+\.\d{2,2}$/ मेरे लिए काम किया 0.00 की आवश्यकता होती है

— ZStoneDPM

Answer 1

इसके बजाय step="any", जो किसी भी दशमलव स्थानों की संख्या की step=".01"अनुमति देता है , उपयोग करें , जो दो दशमलव स्थानों तक की अनुमति देता है।

कल्पना में अधिक जानकारी: https://www.w3.org/TR/html/sec-forms.html#the-step-attribute

Comments

यह सही उत्तर नहीं है। चरण केवल यह नियंत्रित करता है कि जब आप क्लिक या प्रेस करते हैं तो क्या होता है और यह कुछ भी प्रतिबंधित नहीं करता है।

— ini

@ मिचेल_ इसकी परवाह किए बिना कि क्या उम्मीद है, यह परीक्षण के लिए काफी तुच्छ है: jsfiddle.net/9hvm0b5u अभी भी 2 डेसीमल से अधिक इनपुट होने की अनुमति देता है। चरण केवल वही नियंत्रित करते हैं जो +/- बटन द्वारा राशि को स्थानांतरित करते हैं। (क्रोम)

— नाथन

@Michael_B उपयोगकर्ता को 500.12345किसी भी इनपुट में नंबर टाइप करने से नहीं रोका जाता है, शायद आवश्यकताओं की हमारी समझ अलग है।

— नाथन

यह ध्यान दिया जाना चाहिए कि, जबकि उपयोगकर्ता दशमलव स्थान के बाद किसी भी संख्या को टाइप कर सकता है, अधिकांश ब्राउज़र अमान्य मान और CSS चयनकर्ताओं के साथ फ़ॉर्म जमा करने की अनुमति नहीं देंगे :validऔर :invalidअपेक्षित रूप से लागू होते हैं।

— एंड्रयू डिनमोर

@ नथन, यह ब्राउज़र सत्यापन का परीक्षण करने के लिए भी तुच्छ है। 2 से अधिक दशमलव स्थानों के साथ एक मान जमा करने का प्रयास करें: jsfiddle.net/4yesgn7b

— imclean

Answer 2

अगर किसी को भी एक रेगेक्स की तलाश है जो केवल वैकल्पिक 2 दशमलव स्थानों के साथ संख्या की अनुमति देता है

^\d*(\.\d{0,2})?$

एक उदाहरण के लिए, मैंने नीचे समाधान को काफी विश्वसनीय पाया है

HTML:

<input name="my_field" pattern="^\d*(\.\d{0,2})?$" />

जेएस / JQuery:

$(document).on('keydown', 'input[pattern]', function(e){
  var input = $(this);
  var oldVal = input.val();
  var regex = new RegExp(input.attr('pattern'), 'g');

  setTimeout(function(){
    var newVal = input.val();
    if(!regex.test(newVal)){
      input.val(oldVal); 
    }
  }, 0);
});

Comments

सेटटाइमआउट () होने का उद्देश्य क्या है?

— डेरेक

@Derek। मुझे लगता है कि यह regex.test DOM को ब्लॉक नहीं करता है। इसे देखें: developer.mozilla.org/en-US/docs/Web/JavaScript/EventLoop

— christo8989

@ डेरेक मैं केवल यह मान सकता हूं setTimeout()कि keydownईवेंट को पूरा करने से पहले इंतजार करना होगा newVal(अन्यथा यह उसी तरह होगा oldVal)। हालाँकि, 0 के टाइमआउट के साथ, यह व्यर्थ है और दोनों मानों के रूप में काम नहीं करता है (अक्सर फ़ायरफ़ॉक्स में) समान हैं। यदि आप इसे 1 पर सेट करते हैं, उदाहरण के लिए, यह ठीक काम करता है।

— alstr

तो, आपने मेरे संपादन को दो अलग-अलग पोस्टों में एक कारण के साथ "बिना उत्तर दिए हुए संपादित अपमानित करने वाले उत्तर की प्रारूपण गुणवत्ता" के रूप में रोलबैक किया। क्या आप बता सकते हैं कि मेरा संपादन कैसे अस्वीकृत है और यह वास्तव में उत्तर की गुणवत्ता को कैसे ख़राब करता है? (IMO, इसे बेहतर बनाता है, क्योंकि लोग कोड को सीधे पोस्ट से चला सकते हैं और उन्हें JSFiddle पर जाने की आवश्यकता नहीं है)।

— डबल-बीप

Answer 3

मुद्रा के लिए, मेरा सुझाव है:

<div><label>Amount $
    <input type="number" placeholder="0.00" required name="price" min="0" value="0" step="0.01" title="Currency" pattern="^\d+(?:\.\d{1,2})?$" onblur="
this.parentNode.parentNode.style.backgroundColor=/^\d+(?:\.\d{1,2})?$/.test(this.value)?'inherit':'red'
"></label></div>

Http://jsfiddle.net/vx3axsk5/1/ देखें

HTML5 गुण "चरण", "मिनट" और "पैटर्न" फॉर्म सबमिट होने पर मान्य होंगे, ऑनब्लूर नहीं। आप की जरूरत नहीं है stepअगर आप एक है patternऔर आप की जरूरत नहीं है patternअगर आप एक है step। इसलिए आप step="any"मेरे कोड के साथ वापस लौट सकते हैं क्योंकि पैटर्न इसे वैसे भी मान्य करेगा।

यदि आप onblur को मान्य करना चाहते हैं, तो मेरा मानना ​​है कि उपयोगकर्ता को एक दृश्य क्यू देना भी पृष्ठभूमि लाल रंग को रंगने में मददगार है। यदि उपयोगकर्ता का ब्राउज़र समर्थन नहीं करता है, type="number"तो यह वापस आ जाएगा type="text"। यदि उपयोगकर्ता का ब्राउज़र HTML5 पैटर्न सत्यापन का समर्थन नहीं करता है, तो मेरा जावास्क्रिप्ट स्निपेट फ़ॉर्म को सबमिट करने से नहीं रोकता है, लेकिन यह विज़ुअल व्यू देता है। तो गरीब HTML5 समर्थन वाले लोगों के लिए, और जावास्क्रिप्ट अक्षम या HTTP अनुरोधों के साथ डेटाबेस में हैक करने की कोशिश कर रहे लोगों के लिए, आपको सर्वर पर फिर से सत्यापित करने की आवश्यकता है। फ्रंट-एंड पर सत्यापन के साथ बिंदु एक बेहतर उपयोगकर्ता अनुभव के लिए है। इसलिए जब तक आपके अधिकांश उपयोगकर्ताओं के पास अच्छा अनुभव है, HTML5 सुविधाओं पर भरोसा करना ठीक है बशर्ते कि कोड अभी भी काम करेगा और आप बैक-एंड पर सत्यापन कर सकते हैं।

Comments

MDN के अनुसार , patternइसके लिए काम नहीं करता input type=number:<input type="number"> elements do not support use of the pattern attribute for making entered values conform to a specific regex pattern. The rationale for this is that number inputs can't contain anything except numbers, and you can constrain the minimum and maximum number of valid digits using the min and max attributes, as explained above.

— izogfif

@izogfif अच्छा नोट। यह भी ध्यान दें कि मैंने वास्तव में नोट किया है कि आपको दोनों की आवश्यकता नहीं है और तीन तरीके प्रदान किए हैं: स्टेप, पैटर्न और ऑनब्लर। उस समय मेरा तर्क यह था कि यदि एक ब्राउज़र किसी कारण से दूसरे पर चोक करता है तो उसके पास दूसरा है। संभवतः दृश्य सत्यापन के लिए इन दिनों कदम पर भरोसा करना सुरक्षित है।

— अल्टीमेटर

Answer 4

चरण 1: अपने HTML नंबर इनपुट बॉक्स को एक ऑनकॉन्ग इवेंट में हुक करें

myHTMLNumberInput.onchange = setTwoNumberDecimal;

या 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()विधि में पारित मूल्य को अलग करके दशमलव स्थानों की संख्या को बदल सकते हैं । MDN डॉक्स देखें ।

toFixed(2); // 2 decimal places
toFixed(4); // 4 decimal places
toFixed(0); // integer

Comments

parseFloat (parseFloat (this.value) .toFixed (2)); यदि आप दशमलव या संख्या प्रकार चाहते हैं, तो आप पूरी चीज़ को parseFloat () में डिफॉल्ट रूप से (toFixed) () विधि रिटर्न स्ट्रिंग से लपेट सकते हैं।

— १६:५० बजे

Answer 5

मैंने पाया कि jQuery का उपयोग करना मेरा सबसे अच्छा समाधान था।

$( "#my_number_field" ).blur(function() {
    this.value = parseFloat(this.value).toFixed(2);
});

Answer 6

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

<input type="number" step="0.01" class="form-control"  />

या @SamohtVII द्वारा सुझाए गए jQuery का उपयोग करें

$( "#ELEMENTID" ).blur(function() {
    this.value = parseFloat(this.value).toFixed(2);
});

Comments

यह क्रोम 57 में 2 स्थानों पर दशमलव को सीमित नहीं करता है

— mintedsky

यह सही नहीं है। चरण केवल यह नियंत्रित करता है कि जब आप क्लिक या प्रेस करते हैं तो क्या होता है और यह कुछ भी प्रतिबंधित नहीं करता है।

— ini

स्टेप 1.000 जैसी संख्या को दर्ज होने से रोकता है।

— जैपोनोग्लिका

Answer 7

इस कोड का उपयोग करें

<input type="number" step="0.01" name="amount" placeholder="0.00">

डिफ़ॉल्ट रूप से HTML5 के लिए चरण मान इनपुट तत्व चरण = "1" है।

Answer 8

बस लिखें

<input type="number" step="0.1" lang="nb">

lang = 'nb' आपको कॉमा या अवधि के साथ अपने दशमलव संख्या लिखने देता है

Comments

"lang = 'nb' आपको कॉमा या अवधि के साथ अपने दशमलव संख्या लिखने देता है" कुछ और के लिए नहीं बोल सकता, लेकिन मेरे लिए क्रोम में काम नहीं करता है।

— एंड्रयू डिनमोर

Answer 9

इनपुट पर:

step="any"
class="two-decimals"

स्क्रिप्ट पर:

$(".two-decimals").change(function(){
  this.value = parseFloat(this.value).toFixed(2);
});

Comments

कृपया अपने पोस्ट में स्लर्स का उपयोग करने से बचें। और अच्छा होना

— जेम्स