मैं HTML5 "नंबर" तत्व में संभावित इनपुट को कैसे सीमित कर सकता हूं?

Question

के लिए <input type="number">तत्व, maxlengthकाम नहीं कर रहा। मैं maxlengthउस संख्या तत्व के लिए कैसे प्रतिबंधित कर सकता हूं ?

Comments

बेहतर समाधान की तलाश में लोगों के लिए, यह सबसे अच्छा है: stackoverflow.com/questions/9361193/…

— mnsal Korkmaz

एंड्रॉइड टैबलेट में क्रोम ब्राउज़र में अधिकतम विशेषता काम नहीं करती है।

— हमेशा के लिए

@ ÜnsalKorkmaz: समाधान नुकसान है कि यह संख्या कीपैड एंड्रॉयड उपकरणों पर नहीं लाती

— विल

Answer 1

और आप एक maxविशेषता जोड़ सकते हैं जो आपके द्वारा सम्मिलित किए जाने वाले उच्चतम संभव संख्या को निर्दिष्ट करेगा

<input type="number" max="999" />

यदि आप दोनों एक मान जोड़ते हैं maxऔर minआप अनुमत मानों की सीमा निर्दिष्ट कर सकते हैं:

<input type="number" min="1" max="999" />

ऊपर अभी भी एक उपयोगकर्ता को निर्दिष्ट सीमा के बाहर एक मान दर्ज करने से रोक नहीं होगा । इसके बजाय उसे एक पॉपअप प्रदर्शित किया जाएगा जो उसे इस स्क्रीनशॉट में दिखाए गए फॉर्म को सबमिट करने पर इस सीमा के भीतर एक मान दर्ज करने के लिए कहेगा:

Comments

क्रिस्टर, यह काम किया। जैसा कि @Andy ने कहा कि मैंने oninput का उपयोग अतिरिक्त संख्याओं को स्लाइस करने के लिए किया है। संदर्भ mathiasbynens.be/notes/oninput

— प्रसाद

@ प्रसाद - अगर एंडी का जवाब सही है, तो उसे चुने गए वोट के बजाय इसका चयन करें।

— मोशे

यह सही है, लेकिन एंडी के रूप में ध्यान दिया जाना चाहिए कि यह किसी को अधिक संख्या टाइप करने से प्रतिबंधित नहीं करता है। तो यह वास्तव में एक पाठ क्षेत्र में अधिकतम के बराबर नहीं है।

— डीए।

यदि आप बस एक उच्च परिशुद्धता फ्लोट में प्रवेश करते हैं, तो यह टूट जाएगा। उदाहरण के लिए 3.1415926 क्योंकि यह कम से कम 999 और अधिक से अधिक 1. है इस के आसपास हो जाता है

— 0112

मुझे नहीं पता कि यह इतना उत्कीर्ण और स्वीकृत क्यों है जब यह बस काम नहीं करता है! यह केवल "स्पिनर" नियंत्रणों को प्रभावित करता है, और उपयोगकर्ता को एक लंबी संख्या टाइप करने से रोकने के लिए कुछ भी नहीं करता है।

— Codemonkey

Answer 2

आप विशेषताओं minऔर maxविशेषताओं को निर्दिष्ट कर सकते हैं , जो केवल एक विशिष्ट सीमा के भीतर इनपुट की अनुमति देगा।

<!-- equivalent to maxlength=4 -->
<input type="number" min="-9999" max="9999">

यह केवल स्पिनर नियंत्रण बटन के लिए काम करता है। यद्यपि उपयोगकर्ता अनुमति से अधिक संख्या टाइप करने में सक्षम हो सकता है max, लेकिन फॉर्म सबमिट नहीं होगा।

^{क्रोम 15 से लिया गया स्क्रीनशॉट}

आप वर्णों की संख्या सीमित करने के लिए जावास्क्रिप्ट में HTML5 घटना का उपयोग कर सकते हैं oninput:

myInput.oninput = function () {
    if (this.value.length > 4) {
        this.value = this.value.slice(0,4); 
    }
}

Comments

उस जावास्क्रिप्ट दृष्टिकोण के साथ एक संभावित मुद्दा: यदि प्रविष्टि बिंदु मान के अंत में नहीं है तो यह अपेक्षित रूप से काम नहीं कर सकता है। उदाहरण के लिए, यदि आप इनपुट फ़ील्ड में "1234" मान दर्ज करते हैं, तो प्रविष्टि बिंदु को मूल्य की शुरुआत में वापस ले जाएं और "5" टाइप करें, आप "5123" मान के साथ समाप्त होते हैं। यह एक इनपुट प्रकार = "टेक्स्ट" फ़ील्ड से 4 की अधिकतम लंबाई के साथ अलग है, जहां ब्राउज़र आपको "पूर्ण" फ़ील्ड में 5 वां वर्ण टाइप नहीं करने देगा, और मान "1234" रहेगा।

— जॉन श्नाइडर

@ और, जाहिर है कि सवाल गैर-जेएस तरीके की तलाश कर रहा है maxlength.............

— पेसियर

@ स्पेसर: मेरे जवाब में कुछ ऐसा हुआ जो मैंने अन्यथा सोचा था? जैसा कि आप देख सकते हैं, मैंने निकटतम संभव समाधान की पेशकश की जिसे केवल HTML का उपयोग करके प्राप्त किया जा सकता है, साथ ही जावास्क्रिप्ट का उपयोग करने वाले एक अतिरिक्त सुझाव के साथ जहां ओपी उपयोगकर्ता को अनुमति से अधिक अक्षर टाइप करने से रोकना चाहता था।

— एंडी ई

Answer 3

यदि आप एक मोबाइल वेब समाधान की तलाश कर रहे हैं जिसमें आप अपने उपयोगकर्ता को पूर्ण टेक्स्ट कीबोर्ड के बजाय एक नंबर पैड देखना चाहते हैं। प्रकार = "tel" का प्रयोग करें। यह अधिकतम गति के साथ काम करेगा जो आपको अतिरिक्त जावास्क्रिप्ट बनाने से बचाता है।

अधिकतम और न्यूनतम अभी भी उपयोगकर्ता को अधिकतम और न्यूनतम से अधिक संख्या में टाइप करने की अनुमति देगा, जो कि इष्टतम नहीं है।

Comments

शानदार खोज, यह एक आकर्षण की तरह काम करता है, अतिरिक्त जावास्क्रिप्ट बनाने के लिए नहीं होने के लिए अंगूठे।

— डिएगो

मैंने पाया है कि यह संख्यात्मक इनपुट के लिए सबसे अच्छा समाधान नहीं है क्योंकि "टेली" इनपुट अतिरिक्त प्रतीकों के लिए अनुमति देता है, और यह प्रत्येक संख्या के बगल में पत्र प्रदर्शित करता है। विशुद्ध रूप से संख्यात्मक कीबोर्ड ज्यादा साफ दिखता है।

— हवाखारिस

@hawkharris आप सही हैं, टाइप करें = "नंबर" क्लीनर UI है। खराब चार्ल में गलती से टाइप करना आसान है। उपयोगकर्ता को खराब डेटा दर्ज नहीं करने के लिए अतिरिक्त सत्यापन की आवश्यकता है। लेकिन यह भी विचार करें कि उपयोगकर्ता केवल सभी दशमलव बिंदुओं को आसानी से दर्ज कर सकता है और साथ ही एक नंबर कीबोर्ड के साथ। इसके अलावा यह अतिरिक्त जावास्क्रिप्ट के बिना ऊपर दिए गए प्रश्न को हल नहीं करता है।

— डुआने

धन्यवाद, मैं आयनिक फ्रेमवर्क मोबाइल ऐप पर काम कर रहा हूं और इसने मेरे मुद्दे को हल किया

— अहमद

यदि पैटर्न के साथ प्रयोग किया जाता है = "[0-9] *" तो अतिरिक्त प्रतीकों को निष्क्रिय कर दिया जाएगा

— एपीरेरा

Answer 4

आप इन सभी को इस तरह से जोड़ सकते हैं:

<input name="myinput_drs"
oninput="maxLengthCheck(this)"
type = "number"
maxlength = "3"
min = "1"
max = "999" />

<script>
  // This is an old version, for a more recent version look at
  // https://jsfiddle.net/DRSDavidSoft/zb4ft1qq/2/
  function maxLengthCheck(object)
  {
    if (object.value.length > object.maxLength)
      object.value = object.value.slice(0, object.maxLength)
  }
</script>

अद्यतन:
आप किसी भी गैर-संख्यात्मक वर्ण को दर्ज करने से रोकना चाह सकते हैं, क्योंकि object.lengthसंख्या आदानों के लिए एक रिक्त स्ट्रिंग होगी, और इसलिए इसकी लंबाई होगी 0। इस प्रकार maxLengthCheckकार्य नहीं होगा।

समाधान: उदाहरण के लिए इसे या इसे
देखें ।

डेमो - कोड का पूरा संस्करण यहां देखें:
http://jsfiddle.net/DRSDavidSoft/zb4ft1qq/1/

अपडेट 2: यहां अपडेट कोड: https://jsfiddle.net/DRSDavidSoft/zb4ft1qq/2/

अद्यतन 3: कृपया ध्यान दें कि एक दशमलव बिंदु से अधिक दर्ज करने की अनुमति अंक के मूल्य के साथ गड़बड़ कर सकती है।

Comments

यह एक अच्छा समाधान है, लेकिन मुझे लगता है कि यदि कोई गैर-संख्यात्मक मान दर्ज किए गए हैं, तो object.value.length रिटर्न 0 है।

— एंड्रयू

@AndrewSpear ऐसा इसलिए है क्योंकि यदि आप एक प्रकार के 'संख्या' सेट के साथ इनपुट में गैर-संख्यात्मक मान दर्ज करते हैं, तो object.value एक रिक्त स्ट्रिंग होगी। दस्तावेज देखें। इस समस्या को ठीक करने के लिए कृपया मेरा अपडेट भी पढ़ें।

— डेविड रिफौआ

यदि आप एक से अधिक दशमलव बिंदुओं को इनपुट करते हैं, जैसे 111..1111। सुरक्षा के लिए इस कोड का उपयोग न करें, क्योंकि दुर्भावनापूर्ण कोड अभी भी पास हो सकता है।

— पाईबाई

@PieBie Dude, यह कोड 3+ साल पहले का है। इसके बजाय jQuery का उपयोग करें।

— डेविड रिफौआ

हाँ, मुझे पता है कि, लेकिन शुरुआती अभी भी इसे कॉपी-पेस्ट कर सकते हैं।

— पाईबाई

Answer 5

यह बहुत आसान है, कुछ जावास्क्रिप्ट के साथ आप एक अनुकरण कर सकते हैं maxlength, इसे देखें:

//maxlength="2"
<input type="number" onKeyDown="if(this.value.length==2) return false;" />

Comments

अपने समाधान के साथ आप 2 वर्णों तक पहुँचने के बाद बैकस्पेस का उपयोग नहीं कर सकते। लेकिन मैं एक कार्यात्मक समाधान के लिए कुछ चीज़ों को याद करता हूं

— क्रिस्टोफ़ डेबोव

OnKeyDownyou के बजाय onKeyPress का उपयोग करना चाहिए।

— रूपेश अरोड़ा

यदि आप पाठ को हाइलाइट करते हैं और एक चरित्र को दबाते हैं तो काम नहीं करेंगे (यानी इनपुट की सामग्री को बदलने के लिए)

— एरजून

इसे मान्य करें यदि यह निम्नलिखित कुंजियों से नहीं है stackoverflow.com/a/2353562/1534925

— अक्षय

इसके साथ समस्या keydownयह है कि आप अधिकतम वर्णों पर बैकस्पेस का उपयोग नहीं कर सकते हैं। इसके साथ समस्या keypressयह है कि आप अधिकतम वर्णों से परे पेस्ट कर सकते हैं।

— स्टैवम

Answer 6

या यदि आपका अधिकतम मूल्य उदाहरण के लिए 99 और न्यूनतम 0 है, तो आप इसे इनपुट तत्व में जोड़ सकते हैं (आपका मूल्य आपके अधिकतम मूल्य आदि द्वारा फिर से लिखा जाएगा)

<input type="number" min="0" max="99" 
   onKeyUp="if(this.value>99){this.value='99';}else if(this.value<0){this.value='0';}"
id="yourid">

तब (यदि आप चाहते हैं), आप जांच सकते हैं कि क्या इनपुट वास्तव में संख्या है

Comments

... महान, लेकिन आपको अब न्यूनतम और अधिकतम की आवश्यकता नहीं है दोस्त। (सिर्फ कह रहा है)

— xoxel

यदि आप चेतावनी संदेश को अभी भी प्रदर्शित करना चाहते हैं तो

— @xoxel

यह वास्तव में अच्छा है ... धन्यवाद

— विंसी ओमन

सामान्यीकरण की खातिर मैंonKeyUp="if(this.value>this.max)this.value=this.max;if(this.value<this.min)this.value=this.min;"

— oriadam

Answer 7

आप इसे पाठ के रूप में निर्दिष्ट कर सकते हैं, लेकिन पेटर्न को जोड़ सकते हैं, जो केवल मिलान संख्या:

<input type="text" pattern="\d*" maxlength="2">

यह सही काम करता है और मोबाइल पर भी (iOS 8 और एंड्रॉइड पर परीक्षण किया गया) नंबर कीबोर्ड को पॉप आउट करता है।

Comments

IE9 और इससे पहले के संस्करणों में पैटर्न विशेषता का समर्थन नहीं किया गया है, और इसमें सफारी में आंशिक समर्थन है: caniuse.com/#feat=input-pattern

— diazdeteran

हां, इशारा करने के लिए धन्यवाद, लेकिन हमने IE9 समर्थन (इसमें से सरसों को काटकर) गिरा दिया, और मैं इसे JS तरीकों पर पसंद करता हूं। परियोजना पर निर्भर करता है।

— क्रिस पानायोटॉफ

एक उपयोगकर्ता को इसके साथ गैर-संख्यात्मक वर्ण दर्ज करने से नहीं रोका जाता है। वे किसी भी वर्ण के 2 में प्रवेश कर सकते हैं। patternकेवल मान्यता हाइलाइटिंग कारण बनता है।

— बर्ट

एंड्रॉइड 9 (नोकिया 8) पर परीक्षण किया गया है, लेकिन मुझे नियमित कीबोर्ड मिलता है :( किसी भी विचार?

— ओरिदम

Answer 8

//For Angular I have attached following snippet.

<div ng-app="">
  <form>
    Enter number: <input type="number" ng-model="number" onKeyPress="if(this.value.length==7) return false;" min="0">
  </form>
  <h1>You entered: {{number}}</h1>
</div>

यदि आप "onkeypress" इवेंट का उपयोग करते हैं तो आपको डेवलपमेंट करते समय कोई उपयोगकर्ता सीमाएँ नहीं मिलेंगी (इकाई परीक्षण)। और यदि आपके पास कोई आवश्यकता है जो उपयोगकर्ता को किसी विशेष सीमा के बाद प्रवेश करने की अनुमति नहीं देता है, तो इस कोड को देखें और एक बार प्रयास करें।

Comments

जो समस्याएं मुझे यहाँ दिखाई दे रही हैं, वे हैं: 1. चुनिंदा टेक्स्ट के साथ बदलें और टाइप काम नहीं करता है यदि इनपुट 7 नंबर तक पहुँच गया है। 2. इनपुट बढ़ाते हुए 1 जब ओवरफ़्लो "बोर्डर" हिट काम करता है -> 9999999 और ऊपर क्लिक करें बटन। सीमा को तोड़ता है

— एडब

मैंने सरल संस्करण जावास्क्रिप्ट के साथ कोशिश की। आप चाहें तो रन कोड स्निपेट का उपयोग करके देख सकते हैं। जैसे मुझे कोई सीमा नहीं मिली।

— प्रसाद शिंदे

कोई सीमाएं भी नहीं मिलीं। यह 7 अंकों पर रुकता है। मैं अपने कोड के लिए इस समाधान का उपयोग कर रहा हूं।

— क्लाउडियो

एक सीमा है। जब आप सीमा को मारते हैं, तो सभी का चयन करें और उन्हें प्रतिस्थापित करना चाहते हैं यह काम नहीं करता है। प्रतिस्थापन मेरे लिए तभी काम करता है जब मैं झूठे वापस आने से पहले एक के साथ मूल्य को अधिलेखित कर देता हूं।

— Insomnia88

@ Insomnia88, @ edub अगर हम फ़ंक्शन लिखते हैं और आवश्यक शर्तों की जांच करते हैं ...

— प्रसाद शिंदे

Answer 9

एक अन्य विकल्प यह है कि अधिकतम श्रवण विशेषता के साथ किसी भी चीज़ के लिए केवल श्रोता को जोड़ा जाए और उसके लिए स्लाइस मान जोड़ें। उपयोगकर्ता यह मानते हुए कि इनपुट से संबंधित हर घटना के अंदर एक फ़ंक्शन का उपयोग नहीं करना चाहता है। यहाँ एक कोड स्निपेट है। CSS और HTML कोड को अनदेखा करें, जावास्क्रिप्ट यही मायने रखता है।

// Reusable Function to Enforce MaxLength
function enforce_maxlength(event) {
  var t = event.target;
  if (t.hasAttribute('maxlength')) {
    t.value = t.value.slice(0, t.getAttribute('maxlength'));
  }
}

// Global Listener for anything with an maxlength attribute.
// I put the listener on the body, put it on whatever.
document.body.addEventListener('input', enforce_maxlength);

label { margin: 10px; font-size: 16px; display: block }
input { margin: 0 10px 10px; padding: 5px; font-size: 24px; width: 100px }
span { margin: 0 10px 10px; display: block; font-size: 12px; color: #666 }

<label for="test_input">Text Input</label>
<input id="test_input" type="text" maxlength="5"/>
<span>set to 5 maxlength</span>

<br>

<label for="test_input">Number Input</label>
<input id="test_input" type="number" min="0" max="99" maxlength="2"/>
<span>set to 2 maxlength, min 0 and max 99</span>

Answer 10

अधिकतम लंबाई अधिकतम <input type="number"तरीके से काम नहीं करेगी, मुझे पता है oninputकि अधिकतम गति को सीमित करने के लिए घटना का उपयोग करना है। कृपया सरल कार्यान्वयन के लिए नीचे दिया गया कोड देखें।

<input name="somename"
    oninput="javascript: if (this.value.length > this.maxLength) this.value = this.value.slice(0, this.maxLength);"
    type = "number"
    maxlength = "6"
 />

Comments

एक जादू की तरह काम किया!

— SiboVG

Answer 11

कहते हैं कि आप चाहते थे कि अधिकतम स्वीकृत मूल्य 1000 हो - या तो टाइप किए गए या स्पिनर के साथ।

आप स्पिनर मूल्यों का उपयोग करके प्रतिबंधित करते हैं: type="number" min="0" max="1000"

और जावास्क्रिप्ट के साथ कीबोर्ड द्वारा टाइप किए गए को प्रतिबंधित करें: onkeyup="if(parseInt(this.value)>1000){ this.value =1000; return false; }"

<input type="number" min="0" max="1000" onkeyup="if(parseInt(this.value)>1000){ this.value =1000; return false; }">

Answer 12

जैसा कि दूसरों द्वारा कहा गया है, न्यूनतम / अधिकतम अधिकतम गति के समान नहीं है क्योंकि लोग अभी भी एक नाव में प्रवेश कर सकते हैं जो आपके द्वारा इच्छित अधिकतम स्ट्रिंग लंबाई से बड़ा होगा। वास्तव में अधिकतम गति का अनुकरण करने के लिए, आप चुटकी में ऐसा कुछ कर सकते हैं (यह अधिकतम गति = "16%) के बराबर है:"

<input type="number" oninput="if(value.length>16)value=value.slice(0,16)">

Comments

जब अंत में बीच में डाला जाता है तो स्लाइस अंत उपयोगकर्ता ज्ञान के बिना वर्णों को हटा देगा जबकि अधिकतम लंबाई ब्लॉक हो जाएगी।

— प्रदीप कुमार प्रभारण

@PradeepKumarPrabaharan maxlengthनंबर इनपुट द्वारा समर्थित नहीं है। मेरे उदाहरण में, value.slice(0,16)जब तक इनपुट मान 16 वर्णों से अधिक नहीं होगा , तब तक किक नहीं करेगा।

— दिनदान

हाँ अधिकतम संख्या के आदानों के लिए समर्थित नहीं है .. यह कोड है लेकिन यह कोड अधिकतम की संपत्ति से बिल्कुल मेल नहीं खाता है ..

— प्रदीप कुमार प्रभारण

@TobiasGaertner type="number"उस का ख्याल रखता है :)।

— थूडन

@ 10basetom ... ब्राउज़र के आधार पर ... FF में आप अभी भी वर्ण दर्ज कर सकते हैं और वे सीमा के बाद बंद नहीं होंगे - लेकिन प्रकार संख्या के विचार से संबंधित यह एक स्वीकार्य समाधान है।

— टोबियास गर्टनर

Answer 13

मे जेंको मौरा का जवाब एक अच्छी शुरुआत थी। हालाँकि, उनके समाधान का अर्थ है कि जब आप दूसरे अंक में प्रवेश करते हैं तो फ़ील्ड का सभी संपादन बंद हो जाता है। इसलिए आप मान नहीं बदल सकते हैं या किसी भी वर्ण को हटा नहीं सकते हैं।

निम्नलिखित कोड 2 पर रुक जाता है, लेकिन संपादन जारी रखने की अनुमति देता है;

//MaxLength 2
onKeyDown="if(this.value.length==2) this.value = this.value.slice(0, - 1);"

Comments

नहीं। मान चिपकाने का प्रयास करें।

— क्वर्टी

Answer 14

मुझे पहले यह समस्या थी और मैंने इसे html5 नंबर प्रकार और jQuery के संयोजन का उपयोग करके हल किया।

<input maxlength="2" min="0" max="59" name="minutes" value="0" type="number"/>

स्क्रिप्ट:

$("input[name='minutes']").on('keyup keypress blur change', function(e) {
    //return false if not 0-9
    if (e.which != 8 && e.which != 0 && (e.which < 48 || e.which > 57)) {
       return false;
    }else{
        //limit length but allow backspace so that you can still delete the numbers.
        if( $(this).val().length >= parseInt($(this).attr('maxlength')) && (e.which != 8 && e.which != 0)){
            return false;
        }
    }
});

मुझे नहीं पता कि क्या घटनाएं थोड़ी ज्यादा हैं, लेकिन इससे मेरी समस्या हल हो गई। JSfiddle

Comments

आप आसानी से पात्रों को पेस्ट कर सकते हैं।

— जेसिका

Answer 15

HTML इनपुट

 <input class="minutesInput" type="number" min="10" max="120" value="" />

jQuery

 $(".minutesInput").on('keyup keypress blur change', function(e) {

    if($(this).val() > 120){
      $(this).val('120');
      return false;
    }

  });

Answer 16

संख्या आदानों के लिए अधिकतम गति निर्धारित करने का एक सरल तरीका है:

<input type="number" onkeypress="return this.value.length < 4;" oninput="if(this.value.length>=4) { this.value = this.value.slice(0,4); }" />

Comments

Android क्रोम पर काम नहीं करता है। onkeypress के पास इसके साथ कुछ मुद्दे हैं।

— आकाश ठाकुर

Answer 17

जैसा कि type="number", आप संपत्ति के maxबजाय निर्दिष्ट करते maxlengthहैं, जो संभव अधिकतम संख्या है। तो 4 अंकों के साथ , 5 अंक और इतने पर maxहोना चाहिए ।999999999

यदि आप यह सुनिश्चित करना चाहते हैं कि यह एक सकारात्मक संख्या है, तो आप min="0"सकारात्मक संख्या सुनिश्चित कर सकते हैं ।

Answer 18

ओह। यह ऐसा है जैसे किसी ने इसे लागू करने के माध्यम से आधा रास्ता छोड़ दिया और सोचा कि कोई भी नोटिस नहीं करेगा।

जो भी कारण के लिए, ऊपर दिए गए जवाब minऔर maxविशेषताओं का उपयोग नहीं करते हैं । यह jQuery इसे पूरा करता है:

    $('input[type="number"]').on('input change keyup paste', function () {
      if (this.min) this.value = Math.max(parseInt(this.min), parseInt(this.value) || 0);
      if (this.max) this.value = Math.min(parseInt(this.max), parseInt(this.value) || 0);
    });

यह संभवतः एक नामित फ़ंक्शन "oninput" w / o jQuery के रूप में काम करेगा यदि आपका "jQuery-is-the-devil" प्रकार।

Comments

यह सही ढंग से इस सवाल का जवाब नहीं देता है, लेकिन वोट दिया क्योंकि इससे मेरी समस्या हल हो गई है :)

— TrOnNe

Answer 19

जैसा कि मुझे पता चला है कि आप मोबाइल ब्राउज़र सहित पूर्ण समाधान के लिए किसी भी onkeydown, onkeypressया onkeyupघटनाओं का उपयोग नहीं कर सकते हैं। जिस तरह onkeypressसे Android के लिए क्रोम / ओपेरा में अब और नहीं निकाला गया है (देखें: UI इवेंट W3C वर्किंग ड्राफ्ट, 04 अगस्त 2016 )।

मैंने oninputकेवल घटना का उपयोग करके एक समाधान निकाला । आपको आवश्यकता के रूप में अतिरिक्त संख्या की जाँच करनी होगी जैसे कि नकारात्मक / सकारात्मक संकेत या दशमलव और हजार विभाजक और इस तरह, लेकिन एक शुरुआत के रूप में निम्नलिखित पर्याप्त होना चाहिए:

function checkMaxLength(event) {
	// Prepare to restore the previous value.
	if (this.oldValue === undefined) {
		this.oldValue = this.defaultValue;
	}

	if (this.value.length > this.maxLength) {
		// Set back to the previous value.
		this.value = oldVal;
	}
	else {
		// Store the previous value.
		this.oldValue = this.value;
		
		// Make additional checks for +/- or ./, etc.
		// Also consider to combine 'maxlength'
		// with 'min' and 'max' to prevent wrong submits.
	}
}

मैं भी कई बार ऊपर बताए अनुसार गलत सबमिशन के maxlengthसाथ संयोजन करने minऔर maxरोकने की सलाह दूंगा।

Answer 20

<input type="number" onchange="this.value=Math.max(Math.min(this.value, 100), -100);" />

या यदि आप कुछ भी दर्ज करने में सक्षम होना चाहते हैं

<input type="number" onchange="this.value=this.value ? Math.max(Math.min(this.value,100),-100) : null" />

Answer 21

आप लंबाई प्रतिबंध के साथ संख्यात्मक इनपुट के लिए भी यह कोशिश कर सकते हैं

<input type="tel" maxlength="3" />

Comments

@tiltdown गलत के लिए Sry। जवाब सही दिया।

— shinobi

Answer 22

मुझे पता है कि पहले से ही एक उत्तर है, लेकिन अगर आप चाहते हैं कि आपका इनपुट बिल्कुल maxlengthविशेषता की तरह व्यवहार करे या जितना हो सके, तो निम्न कोड का उपयोग करें:

(function($) {
 methods = {
    /*
     * addMax will take the applied element and add a javascript behavior
     * that will set the max length
     */
    addMax: function() {
        // set variables
        var
            maxlAttr = $(this).attr("maxlength"),
            maxAttR = $(this).attr("max"),
            x = 0,
            max = "";

        // If the element has maxlength apply the code.
        if (typeof maxlAttr !== typeof undefined && maxlAttr !== false) {

            // create a max equivelant
            if (typeof maxlAttr !== typeof undefined && maxlAttr !== false){
                while (x < maxlAttr) {
                    max += "9";
                    x++;
                }
              maxAttR = max;
            }

            // Permissible Keys that can be used while the input has reached maxlength
            var keys = [
                8, // backspace
                9, // tab
                13, // enter
                46, // delete
                37, 39, 38, 40 // arrow keys<^>v
            ]

            // Apply changes to element
            $(this)
                .attr("max", maxAttR) //add existing max or new max
                .keydown(function(event) {
                    // restrict key press on length reached unless key being used is in keys array or there is highlighted text
                    if ($(this).val().length == maxlAttr && $.inArray(event.which, keys) == -1 && methods.isTextSelected() == false) return false;
                });;
        }
    },
    /*
     * isTextSelected returns true if there is a selection on the page. 
     * This is so that if the user selects text and then presses a number
     * it will behave as normal by replacing the selection with the value
     * of the key pressed.
     */
    isTextSelected: function() {
       // set text variable
        text = "";
        if (window.getSelection) {
            text = window.getSelection().toString();
        } else if (document.selection && document.selection.type != "Control") {
            text = document.selection.createRange().text;
        }
        return (text.length > 0);
    }
};

$.maxlengthNumber = function(){
     // Get all number inputs that have maxlength
     methods.addMax.call($("input[type=number]"));
 }

})($)

// Apply it:
$.maxlengthNumber();

Comments

@Phill_t शायद तुम मुझे प्रबुद्ध कर सकते हो? मैंने आपके कोड का उपयोग किया है और यह प्रिंसिपल BUT "$ (()) .attr (" maxlength ") में हमेशा अच्छी तरह से काम कर रहा है। 2. और क्यों" $ (इस) .attr ("maxlength") का उपयोग करना बेहतर होगा। अगर यह सिर्फ "this.maxlength" के बजाय काम कर रहा था जिसे मैंने परीक्षण किया था और उम्मीद के मुताबिक काम कर रहा था और कम है और imho भी पढ़ने के लिए स्पष्ट है? क्या मैं कुछ भूल गया?

— मार्कस

आपका क्या मतलब है "2 बचाता है"?

— Philll_t

Phill_t मेरी क्षमायाचना। "this.maxLength" केवल कीडाउन फ़ंक्शन के दायरे में काम कर रहा है। फ़ंक्शन में "addMax" "यह" अपेक्षित तत्व के बजाय दस्तावेज़ है और इसलिए इसमें अलग-अलग विशेषता मान हैं। मैं इसके बजाय नंबर इनपुट तक कैसे पहुंच पाऊंगा? क्या उपरोक्त कोड वास्तव में आपके पक्ष में काम कर रहा है? मैंने Chrome / Opera / Vivaldi, Firefox, Edge, IE और Safari के साथ परीक्षण किया और प्रत्येक ब्राउज़र के लिए समान परिणाम थे। ठीक है, एज मैक्सलेग्थ = "1" और मैक्सक्लेयर = "2" में, जहां वास्तव में काम किया जा रहा है, लेकिन "$ (यह) .attr (" मैक्सलोमीटर ")" किसी भी उच्च संख्या के लिए आगे नहीं बढ़ता है !!? @ सब लोग: कोई सुझाव?

— मार्कस

जैसा कि मैंने कहा कि यह हमेशा दो है क्योंकि इसे प्रश्न पर तत्व के बजाय दस्तावेज़ पर कहा जाता है क्योंकि मुझे पता चला था कि मैं इसे कब डिबग कर रहा था। वैसे आप मेरे समाधान को भी देखना चाहते हैं, जो मैंने आपका अध्ययन करने के बाद पता लगाया: stackoverflow.com/a/41871960/1312012

— markus s

Answer 23

उपयोग करने के लिए अधिक प्रासंगिक गुण होंगे minऔर max।

Answer 24

यह किसी की मदद कर सकता है।

थोड़ी सी जावास्क्रिप्ट के साथ आप सभी डेटाइम-लोकल इनपुट्स की खोज कर सकते हैं, यह खोज सकते हैं कि उपयोगकर्ता जिस वर्ष इनपुट करने का प्रयास कर रहा है, वह भविष्य में 100 वर्ष से अधिक हो:

$('input[type=datetime-local]').each(function( index ) {

    $(this).change(function() {
      var today = new Date();
      var date = new Date(this.value);
      var yearFuture = new Date();
      yearFuture.setFullYear(yearFuture.getFullYear()+100);

      if(date.getFullYear() > yearFuture.getFullYear()) {

        this.value = today.getFullYear() + this.value.slice(4);
      }
    })
  });