jQuery: "नंबर" को सीमित करने का सबसे अच्छा तरीका क्या है? टेक्स्टबॉक्स के लिए इनपुट? (दशमलव अंक की अनुमति दें)

Question

टेक्स्टबॉक्स के लिए "नंबर" -ऑनली इनपुट को प्रतिबंधित करने का सबसे अच्छा तरीका क्या है?

मैं एक ऐसी चीज की तलाश कर रहा हूं, जो दशमलव बिंदुओं की अनुमति दे।

मैं बहुत सारे उदाहरण देखता हूं। लेकिन अभी तक तय नहीं किया गया है कि किसका उपयोग करना है।

प्रवीण जिगनाथन से अपडेट

अधिक प्लगइन्स नहीं, jQuery ने jQuery.isNumeric()v1.7 में अपना स्वयं का जोड़ा लागू किया है । देखें: https://stackoverflow.com/a/20186188/66767

Comments

यह एक राय आधारित प्रश्न है, लेकिन बहुत उपयोगी है। राय आधारित प्रश्नों की अनुमति दी जानी चाहिए। जो व्यक्ति इस जानकारी की तलाश में है, उसे केवल इस बात की जानकारी होनी चाहिए कि यह केवल एक राय-आधारित उत्तर है। एक TAG पर्याप्त होगा।

— थिएगो सी। एस। वेंचुरा

यहाँ लाइव डेमो codepedia.info/… के

— सतिंदर सिंह

Answer 1

अपडेट करें

इसके लिए एक नया और बहुत सरल उपाय है:

यह आपको पाठ पर किसी भी प्रकार के इनपुट फिल्टर का उपयोग करने की अनुमति देता है <input>, जिसमें विभिन्न संख्यात्मक फिल्टर भी शामिल हैं। यह कॉपी + पेस्ट, ड्रैग + ड्रॉप, कीबोर्ड शॉर्टकट, संदर्भ मेनू संचालन, गैर-टाइप करने योग्य कुंजी और सभी कीबोर्ड लेआउट को सही ढंग से संभाल लेगा।

इस उत्तर को देखें या इसे स्वयं JSFiddle पर आज़माएँ ।

jquery.numeric प्लगइन

मैंने jquery.numeric प्लगइन के साथ कई रूपों को सफलतापूर्वक लागू किया है ।

$(document).ready(function(){
    $(".numeric").numeric();
});

इसके अलावा यह textareas के साथ भी काम करता है!

हालांकि, ध्यान दें कि Ctrl + A, कॉपी + पेस्ट (संदर्भ मेनू के माध्यम से) और ड्रैग + ड्रॉप उम्मीद के मुताबिक काम नहीं करेगा ।

HTML 5

HTML 5 मानक के लिए व्यापक समर्थन के साथ, हम नंबर केवल इनपुट को प्रतिबंधित करने के लिए तत्वों के लिए patternविशेषता और numberप्रकार का उपयोग कर सकते हैं input। कुछ ब्राउज़रों में (विशेष रूप से Google Chrome), यह गैर-संख्यात्मक सामग्री को भी प्रतिबंधित करने का काम करता है। numberअन्य नए इनपुट प्रकारों के बारे में अधिक जानकारी यहाँ उपलब्ध है ।

Comments

यह प्लगइन आपको ओपेरा में बैकस्पेस का उपयोग करने की अनुमति नहीं देता है।

— डैरिल हेन

@ स्रोत केवल कुछ दर्जन लाइनें लंबी हैं, इसलिए मुझे यकीन है कि यह मामूली है कि अनुमति देने के लिए इसे संशोधित कर रहा हूं। मुझे बस यह प्लगइन मिला और इसे संशोधित किया गया, ताकि allowDecimalजब भी मैं केवल पूर्णांक मानों को अनुमति देना चाहता हूं, तो एक विकल्प हो .. स्रोत बहुत सरल और अच्छी तरह से लिखा गया है।

— अर्लज़

इनपुट फ़ील्ड में कॉपी-पेस्ट करने पर यह काम नहीं करता है type="number"।

— टैल्मारिस

@ टैल्मारिस यह वास्तव में बहुत पुराना सवाल और जवाब है। HTML में बहुत सारे बदलाव हुए हैं और उन पर विचार किया जाना चाहिए।

— TheVillageIdiot

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

— टैल्मारिस

Answer 2

यदि आप इनपुट को प्रतिबंधित करना चाहते हैं (सत्यापन के विपरीत), तो आप प्रमुख घटनाओं के साथ काम कर सकते हैं। कुछ इस तरह:

<input type="text" class="numbersOnly" value="" />

तथा:

jQuery('.numbersOnly').keyup(function () { 
    this.value = this.value.replace(/[^0-9\.]/g,'');
});

इससे उपयोगकर्ता को तुरंत पता चल जाता है कि वे सत्यापन चरण के दौरान बाद के बजाय अल्फा वर्णों आदि में प्रवेश नहीं कर सकते हैं।

आप अभी भी मान्य करना चाहते हैं क्योंकि इनपुट को माउस के साथ काटने और चिपकाने से या संभवतः एक ऑटोकॉम्प्टर द्वारा भरा जा सकता है जो प्रमुख घटनाओं को ट्रिगर नहीं कर सकता है।

Comments

+1 - मैं यही बात सुझाने जा रहा था। यह ध्यान देने योग्य बात है कि सत्यापन का यह रूप अंत में एक बार के बजाय, कीस्ट्रोकेक पर लग सकता है। केवल एक चीज जो मैं जोड़ूंगा वह है अलर्ट का कुछ रूप जो उपयोगकर्ता टाइप कर रहा है उसे अस्वीकार किया जा रहा है। बस अक्षरों को नहीं दिखाने से सभी-बहुत से लोग सोचेंगे कि उनका कीबोर्ड टूट गया है। शायद पृष्ठभूमि या सीमा रंग को बदल दें .. जब तक उपयोगकर्ता जानता है कि आपका ऐप वास्तव में कुछ कर रहा है।

— निकफ

माना। मेरे पास tarbuilders.com पर एक उदाहरण है । यदि आप "संपर्क" पर क्लिक करते हैं, तो प्रपत्र मक्खी पर उपयोगकर्ता इनपुट की जांच करता है और यदि यह वैध है, तो हरे रंग की सीमा और चेक मार्क है। अमान्य -> ​​लाल और "x"

— कीथ बेंट्रुप

तीर कुंजी समस्या को ठीक करने के लिए यह उत्तर देखें ।

— हन्ना

कृपया ध्यान दें कि आप सही माउस बटन क्लिक> पेस्ट के साथ अक्षर और अक्षर अभी भी पेस्ट कर सकते हैं। इसे ठीक करने का एक आसान तरीका होगा:$doc.on('keyup blur input propertychange', 'input[name="price"]', function(){$(this).val($(this).val().replace(/[^0-9\.]/g,''));});

— रेंस टिलमैन

CRAP, अगर मैं संख्या "123" लिखता हूं, और फिर एक पत्र कुंजी दबाता हूं, तो "a" यह इनपुट खाली करता है ...

— candjack

Answer 3

मैंने सोचा था कि सबसे अच्छा जवाब सिर्फ ऐसा करने के लिए ऊपर वाला था।

jQuery('.numbersOnly').keyup(function () {  
    this.value = this.value.replace(/[^0-9\.]/g,''); 
});

लेकिन मैं मानता हूं कि यह एक दर्द है कि तीर की चाबियाँ और बटन स्नैप कर्सर को स्ट्रिंग के अंत तक हटा दें (और इसकी वजह से यह मुझे परीक्षण में वापस लाया गया था)

मैंने एक साधारण बदलाव में जोड़ा

$('.numbersOnly').keyup(function () {
    if (this.value != this.value.replace(/[^0-9\.]/g, '')) {
       this.value = this.value.replace(/[^0-9\.]/g, '');
    }
});

इस तरह अगर कोई बटन हिट होता है जो पाठ को बदलने का कारण नहीं बन रहा है तो इसे अनदेखा करें। इसके साथ आप तीर को मार सकते हैं और अंत तक बिना कूद कर हटा सकते हैं लेकिन यह किसी भी गैर-संख्यात्मक पाठ को साफ करता है।

Comments

बेहतर प्रदर्शन के लिए दो बार चलाने के बजाय प्रतिस्थापित परिणाम के साथ एक संस्करण बनाएं।

— ड्राइवरडैन

keypressइसे आगे सरल बनाने के लिए इस्तेमाल किया जा सकता है, क्योंकि जाहिरा तौर पर keyupऔर keydownकिसी भी कीबोर्ड कुंजी पर ट्रिगर होता है, जबकि keypress केवल "चरित्र" कुंजी पर ट्रिगर होता है (इस प्रकार तीर पर ट्रिगर नहीं होता है और कुंजी हटाएं)। संदर्भ के लिए यह उत्तर देखें: stackoverflow.com/a/1367720/1298685

— इयान कैंपबेल

यह एक से अधिक दशमलवों को स्वीकार कर रहा है। केवल एक दशमलव कैसे स्वीकार करें। मैंने राशि पाठ क्षेत्र के लिए आवेदन किया है। यह 12.5.6 भी ले रहा है। एक बिंदु के लिए कैसे प्रतिबंधित करें।

— निरू रंगोगी

@IanCampbell कीप का मतलब है कि आप उस वर्ण को शुरू करने के लिए इनपुट कर सकते हैं जो हटा नहीं है। काम नहीं करेगा। कीडाउन यही काम करता है। मैं केवल इसे कीप के साथ काम कर सकता हूं।

— निकलड

Answer 4

Jquery.numeric प्लगइन में कुछ बग हैं जिनके बारे में मैंने लेखक को सूचित किया था। यह सफारी और ओपेरा में कई दशमलव बिंदुओं की अनुमति देता है, और आप ओपेरा में बैकस्पेस, तीर कुंजी या कई अन्य नियंत्रण वर्ण टाइप नहीं कर सकते। मुझे सकारात्मक पूर्णांक इनपुट की आवश्यकता थी इसलिए मैंने अंत में सिर्फ अपना लेखन लिखा।

$(".numeric").keypress(function(event) {
  // Backspace, tab, enter, end, home, left, right
  // We don't support the del key in Opera because del == . == 46.
  var controlKeys = [8, 9, 13, 35, 36, 37, 39];
  // IE doesn't support indexOf
  var isControlKey = controlKeys.join(",").match(new RegExp(event.which));
  // Some browsers just don't raise events for control keys. Easy.
  // e.g. Safari backspace.
  if (!event.which || // Control keys in most browsers. e.g. Firefox tab is 0
      (49 <= event.which && event.which <= 57) || // Always 1 through 9
      (48 == event.which && $(this).attr("value")) || // No 0 first digit
      isControlKey) { // Opera assigns values for control keys.
    return;
  } else {
    event.preventDefault();
  }
});

Comments

इस कोड का उपयोग करके इसका 0 में प्रवेश संभव नहीं है। मैक पर क्रोम और एफएफ के साथ परीक्षण किया गया।

— जारेडस्टेंक्विस्ट

0 अंक (48 == event.which && ($) (यह) .val ()> 0) स्वीकार करने के लिए मैंने इसे अपडेट किया है || // नहीं 0 पहला अंक

— aljordan82

यह एक महान समाधान है, लेकिन यह लापता दशमलव है, बस जोड़ें (46 == event.which &&! ($ (यह) .val।) (शामिल हैं ("।"))) ||

— डायमंडड्रैक

0 बिल्कुल नहीं टाइप कर सकते हैं।

— PJ7

Answer 5

अधिक प्लगइन्स नहीं, jQuery ने v1.7 में अपना स्वयं का jQuery.isNumeric () जोड़ा है।

jQuery.isNumeric( value )

निर्धारित करता है कि क्या इसका तर्क एम्बर है।

नमूने के परिणाम

$.isNumeric( "-10" );     // true
$.isNumeric( 16 );        // true
$.isNumeric( 0xFF );      // true
$.isNumeric( "0xFF" );    // true
$.isNumeric( "8e5" );     // true (exponential notation string)
$.isNumeric( 3.1415 );    // true
$.isNumeric( +10 );       // true
$.isNumeric( 0144 );      // true (octal integer literal)
$.isNumeric( "" );        // false
$.isNumeric({});          // false (empty object)
$.isNumeric( NaN );       // false
$.isNumeric( null );      // false
$.isNumeric( true );      // false
$.isNumeric( Infinity );  // false
$.isNumeric( undefined ); // false

इस घटना श्रोता के साथ isNumeric () को कैसे बाँधें, इसका एक उदाहरण है

$(document).on('keyup', '.numeric-only', function(event) {
   var v = this.value;
   if($.isNumeric(v) === false) {
        //chop off the last char entered
        this.value = this.value.slice(0,-1);
   }
});

Comments

कोई प्लगइन्स के लिए +1। मैं हजारों सेपरेटर को अनुमति देने के लिए थोड़ा बदलाव जोड़ना चाहूंगा। var v = this.value;इसे बदलने के स्थान पर var v = this.value.replace(/,/g,'');। जैसे संख्या 21,345,67.800को भी माना जाता है।

— मान 81१

क्या किसी को पता है कि यह संख्याओं की जांच कैसे करता है? क्या यह कीकोड या नियमित अभिव्यक्ति का उपयोग करता है? यदि आप विभिन्न कीबोर्ड लेआउट पर विचार करते हैं तो महत्वपूर्ण है।

— क्रिस्टोफर ग्रिग

यह बहुत करीब है। हालाँकि, यदि आप एक वर्ण कुंजी को दबाए रखते हैं, तो यह चेक को ठीक से नहीं चलाता है। चरित्र "चलेगा।" इसके बजाय यह कोशिश करें: $(document).on('keyup keypress', '#somethingSomething', function(){ var aValue = $(this).val(); if($.isNumeric(aValue) === false){ $(this).val(aValue.slice(0,-1)); } });

— Gwi7d31

Answer 6

ऊपर उल्लिखित संख्यात्मक () प्लगइन ओपेरा में काम नहीं करता है (आप बैकस्पेस या डिलीट नहीं कर सकते हैं, यहां तक ​​कि बैक या फॉरवर्ड कीज़ का भी उपयोग नहीं कर सकते हैं)।

JQuery या जावास्क्रिप्ट दोनों में नीचे दिया गया कोड पूरी तरह से काम करेगा (और यह केवल दो लाइनें हैं)।

JQuery:

$(document).ready(function() {
    $('.key-numeric').keypress(function(e) {
            var verified = (e.which == 8 || e.which == undefined || e.which == 0) ? null : String.fromCharCode(e.which).match(/[^0-9]/);
            if (verified) {e.preventDefault();}
    });
});

जावास्क्रिप्ट:

function isNumeric(e)
{
    var keynum = (!window.event) ? e.which : e.keyCode;
    return !((keynum == 8 || keynum == undefined || e.which == 0) ? null : String.fromCharCode(keynum).match(/[^0-9]/));
}

बेशक यह केवल शुद्ध संख्यात्मक इनपुट (प्लस बैकस्पेस, डिलीट, फॉरवर्ड / बैक कीज) के लिए है, लेकिन इसमें पॉइंट्स और माइनिंग कैरेक्टर्स को आसानी से बदला जा सकता है।

Comments

numpad की भी अनुमति नहीं है

— ग्राहम

Answer 7

आप इसकी संख्या () पद्धति से सत्यापन प्लगइन का उपयोग कर सकते हैं ।

$("#myform").validate({
  rules: {
    field: {
      required: true,
      number: true
    }
  }
});

Comments

FYI करें - संख्या () घातीय संख्याओं के साथ काम नहीं करती है।

— स्कॉटलेनार्ट

Answer 8

नंबर इनपुट प्रतिबंध के लिए लंबे कोड की आवश्यकता नहीं है बस इस कोड को आज़माएं।

यह मान्य इंट और फ्लोट दोनों मानों को भी स्वीकार करता है।

जावास्क्रिप्ट दृष्टिकोण

onload =function(){ 
  var ele = document.querySelectorAll('.number-only')[0];
  ele.onkeypress = function(e) {
     if(isNaN(this.value+""+String.fromCharCode(e.charCode)))
        return false;
  }
  ele.onpaste = function(e){
     e.preventDefault();
  }
}

<p> Input box that accepts only valid int and float values.</p>
<input class="number-only" type=text />

jQuery के दृष्टिकोण

$(function(){

  $('.number-only').keypress(function(e) {
	if(isNaN(this.value+""+String.fromCharCode(e.charCode))) return false;
  })
  .on("cut copy paste",function(e){
	e.preventDefault();
  });

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p> Input box that accepts only valid int and float values.</p>
<input class="number-only" type=text />

अपडेट करें

उपरोक्त उत्तर सबसे आम उपयोग के मामले के लिए हैं - एक नंबर के रूप में इनपुट को मान्य करना।

लेकिन नीचे विशेष उपयोग के मामलों के लिए कोड स्निपेट है

• ऋणात्मक संख्याओं की अनुमति देना
• हटाने से पहले अमान्य कीस्ट्रोक दिखा रहा है।

$(function(){
      
  $('.number-only').keyup(function(e) {
        if(this.value!='-')
          while(isNaN(this.value))
            this.value = this.value.split('').reverse().join('').replace(/[\D]/i,'')
                                   .split('').reverse().join('');
    })
    .on("cut copy paste",function(e){
    	e.preventDefault();
    });

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p> Input box that accepts only valid int and float values.</p>
<input class="number-only" type=text />

Answer 9

नीचे मैं काइस्ट्रोक को सचमुच ब्लॉक करने के लिए उपयोग किया जाता है। यह केवल संख्या 0-9 और एक दशमलव बिंदु की अनुमति देता है। लागू करने में आसान, बहुत सारे कोड नहीं, और एक आकर्षण की तरह काम करता है:

<script>
function isNumberKey(evt) {
    var charCode = (evt.which) ? evt.which : event.keyCode;
    if (charCode != 46 && charCode > 31 && (charCode < 48 || charCode > 57)) {
        return false;
    } else {
        return true;
    }      
}
</script>

<input value="" onkeypress="return isNumberKey(event)">

Comments

अगर किसी को भी आश्चर्य हो रहा है, तो आप charCode != 46if स्टेटमेंट को हटाकर दशमलव को प्रतिबंधित कर सकते हैं । बहुत बढ़िया जवाब!

— Ga

सटीक रूप से, मैंने दशमलव को छोड़ने के लिए चारकोड! = 46 को हटा दिया। धन्यवाद kaleazy, इस जवाब ने मेरे लिए बहुत अच्छा काम किया।

— एमएसकर

यह एक बुरा समाधान है क्योंकि यह बैकस्पेस, तीर, नियंत्रण कुंजी और अन्य आवश्यक कीस्ट्रोक्स को ध्यान में नहीं रखता है।

— ड्राइवरडैन

मैंने बस एक समाधान पोस्ट किया है जो इसके समान है, लेकिन बैकस्पेस, एरो को भी संभालता है और बिना हार्ड-कोडित कुंजी कोड का उपयोग करता है। इसे यहाँ देखें: stackoverflow.com/a/23468513/838608

— Håvard Geithus

Answer 10

इस सुझाव में मामूली सुधार के रूप में , आप इसकी संख्या () , अंकों और श्रेणी विधियों के साथ सत्यापन प्लगइन का उपयोग कर सकते हैं । उदाहरण के लिए, निम्नलिखित आपको 0 और 50 के बीच एक सकारात्मक पूर्णांक सुनिश्चित करता है:

$("#myform").validate({
  rules: {
    field: {
      required: true,
      number: true,
      digits: true,
      range : [0, 50]
    }
  }
});

Answer 11

आप कुंजी पर नीचे जादुई उपस्थिति और गायब होने के अक्षर नहीं देखते हैं। यह माउस पेस्ट पर भी काम करता है।

$('#txtInt').bind('input propertychange', function () {
    $(this).val($(this).val().replace(/[^0-9]/g, ''));
});

Comments

हालांकि दशमलव को अनुमति नहीं दे रहा है, मुझे यह पूर्णांकों के लिए सबसे सरल तरीका लगता है।

— निकलड

दशमलव के लिए, आप शायद regex को कुछ इस तरह से अपडेट कर सकते हैं/[^0-9.]/g

— Null Head

मुझे दशमलव की आवश्यकता नहीं है। यह सिर्फ इसलिए था क्योंकि ओपी ने किया था, लेकिन हाँ :)

— निक

Answer 12

मैंने पहली बार jQuery का उपयोग करके इसे हल करने की कोशिश की थी, लेकिन मैं वास्तव में अनचाहे वर्णों (गैर-अंकों) के बारे में खुश नहीं था, जो वास्तव में कीप पर हटाए जाने से पहले इनपुट क्षेत्र में दिखाई देता है।

अन्य समाधानों की तलाश में मैं यह पाया:

पूर्णांक (गैर-नकारात्मक)

<script>
  function numbersOnly(oToCheckField, oKeyEvent) {
    return oKeyEvent.charCode === 0 ||
        /\d/.test(String.fromCharCode(oKeyEvent.charCode));
  }
</script>

<form name="myForm">
<p>Enter numbers only: <input type="text" name="myInput" 
    onkeypress="return numbersOnly(this, event);" 
    onpaste="return false;" /></p>
</form>

स्रोत: https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers.onkeypress#Example लाइव उदाहरण: http://jsfiddle.net/u8sZq/

दशमलव अंक (गैर-नकारात्मक)

एकल दशमलव बिंदु को अनुमति देने के लिए आप कुछ इस तरह कर सकते हैं:

<script>
  function numbersOnly(oToCheckField, oKeyEvent) {        
    var s = String.fromCharCode(oKeyEvent.charCode);
    var containsDecimalPoint = /\./.test(oToCheckField.value);
    return oKeyEvent.charCode === 0 || /\d/.test(s) || 
        /\./.test(s) && !containsDecimalPoint;
  }
</script>

स्रोत: बस यह लिखा है काम करने लगता है। लाइव उदाहरण: http://jsfiddle.net/tjBsF/

अन्य अनुकूलन

• अधिक प्रतीकों को टाइप करने की अनुमति देने के लिए केवल उन लोगों को नियमित अभिव्यक्ति में जोड़ें जो मूल चार कोड फ़िल्टर के रूप में कार्य कर रहे हैं।
• सरल संदर्भ प्रतिबंधों को लागू करने के लिए, इनपुट फ़ील्ड की वर्तमान सामग्री (स्थिति) (oToCheckField.value) को देखें

कुछ चीजें जिन्हें करने में आपकी रुचि हो सकती है:

• केवल एक दशमलव बिंदु की अनुमति है
• स्ट्रिंग की शुरुआत में तैनात होने पर ही माइनस साइन की अनुमति दें। यह नकारात्मक संख्या के लिए अनुमति देगा।

कमियों

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

मुझे पता है कि शीर्षक jQuery समाधान के लिए पूछता है, लेकिन उम्मीद है कि किसी को भी यह उपयोगी मिलेगा।

Answer 13

डेव आरोन स्मिथ पोस्ट के लिए धन्यवाद

मैंने दशमलव बिंदु और संख्या के अनुभाग से संख्या स्वीकार करने के लिए आपके उत्तर को संपादित किया। यह काम मेरे लिए परफेक्ट है।

$(".numeric").keypress(function(event) {
  // Backspace, tab, enter, end, home, left, right,decimal(.)in number part, decimal(.) in alphabet
  // We don't support the del key in Opera because del == . == 46.
  var controlKeys = [8, 9, 13, 35, 36, 37, 39,110,190];
  // IE doesn't support indexOf
  var isControlKey = controlKeys.join(",").match(new RegExp(event.which));
  // Some browsers just don't raise events for control keys. Easy.
  // e.g. Safari backspace.
  if (!event.which || // Control keys in most browsers. e.g. Firefox tab is 0
      (49 <= event.which && event.which <= 57) || // Always 1 through 9
      (96 <= event.which && event.which <= 106) || // Always 1 through 9 from number section 
      (48 == event.which && $(this).attr("value")) || // No 0 first digit
      (96 == event.which && $(this).attr("value")) || // No 0 first digit from number section
      isControlKey) { // Opera assigns values for control keys.
    return;
  } else {
    event.preventDefault();
  }
});

Answer 14

   window.jQuery.fn.ForceNumericOnly =
       function () {

           return this.each(function () {
               $(this).keydown(function (event) {
                   // Allow: backspace, delete, tab, escape, and enter
                   if (event.keyCode == 46 || event.keyCode == 8 || event.keyCode == 9 || event.keyCode == 27 || event.keyCode == 13 ||
                       // Allow: Ctrl+A
                       (event.keyCode == 65 && event.ctrlKey === true) ||
                       // Allow: home, end, left, right
                       (event.keyCode >= 35 && event.keyCode <= 39)) {
                       // let it happen, don't do anything
                       return;
                   } else {
                       // Ensure that it is a number and stop the keypress
                       if (event.shiftKey || (event.keyCode < 48 || event.keyCode > 57) && (event.keyCode < 96 || event.keyCode > 105)) {
                           event.preventDefault();
                       }
                   }
               });
           });
       };

और इसे उन सभी इनपुटों पर लागू करें जो आप चाहते हैं:

$('selector').ForceNumericOnly();

Answer 15

HTML5, अक्टूबर 2015 के अनुसार CanIUse के अनुसार वैश्विक ब्राउज़र समर्थन 88% + के साथ इनपुट प्रकार संख्या का समर्थन करता है।

<input type="number" step="0.01" min="0" name="askedPrice" id="askedPrice" />

यह JQuery से संबंधित समाधान नहीं है, लेकिन लाभ यह है कि मोबाइल फोन पर एंड्रॉइड कीबोर्ड नंबर दर्ज करने के लिए अनुकूलित किया जाएगा।

वैकल्पिक रूप से, नए पैरामीटर "पैटर्न" के साथ इनपुट प्रकार के पाठ का उपयोग करना संभव है। एचटीएमएल 5 कल्पना में अधिक जानकारी।

मुझे लगता है कि यह jquery समाधान से बेहतर है, क्योंकि इस प्रश्न में jquery समाधान हजारों विभाजक का समर्थन नहीं करता है। यदि आप एचटीएमएल 5 का उपयोग कर सकते हैं।

JSFiddle: https://jsfiddle.net/p1ue8qxj/

Answer 16

यह फ़ंक्शन समान कार्य करता है, ऊपर दिए गए कुछ विचारों का उपयोग करता है।

$field.keyup(function(){
    var val = $j(this).val();
    if(isNaN(val)){
         val = val.replace(/[^0-9\.]/g,'');
         if(val.split('.').length>2) val =val.replace(/\.+$/,"");
    }
    $j(this).val(val); 
});

• दृश्य प्रतिक्रिया दिखाएं (गायब होने से पहले गलत पत्र दिखाई देता है)
• दशमलव की अनुमति देता है
• कई को पकड़ता है "।"
• बाएँ / दाएँ डेल आदि के साथ कोई समस्या नहीं है

Answer 17

/ * यह मेरा क्रॉस ब्राउज़र संस्करण है कि jQuery का उपयोग करके HTML इनपुटबॉक्स में केवल संख्यात्मक (0-9) की अनुमति कैसे दें?
* /

$("#inputPrice").keydown(function(e){
    var keyPressed;
    if (!e) var e = window.event;
    if (e.keyCode) keyPressed = e.keyCode;
    else if (e.which) keyPressed = e.which;
    var hasDecimalPoint = (($(this).val().split('.').length-1)>0);
    if ( keyPressed == 46 || keyPressed == 8 ||((keyPressed == 190||keyPressed == 110)&&(!hasDecimalPoint && !e.shiftKey)) || keyPressed == 9 || keyPressed == 27 || keyPressed == 13 ||
             // Allow: Ctrl+A
            (keyPressed == 65 && e.ctrlKey === true) ||
             // Allow: home, end, left, right
            (keyPressed >= 35 && keyPressed <= 39)) {
                 // let it happen, don't do anything
                 return;
        }
        else {
            // Ensure that it is a number and stop the keypress
            if (e.shiftKey || (keyPressed < 48 || keyPressed > 57) && (keyPressed < 96 || keyPressed > 105 )) {
                e.preventDefault();
            }
        }

  });

Answer 18

बस सामग्री को parseFloat () के माध्यम से चलाएं। यह NaNअमान्य इनपुट पर लौटेगा ।

Answer 19

आप autoNumeric को decorplanit.com से उपयोग कर सकते हैं । उन्हें संख्यात्मक, साथ ही मुद्रा, गोलाई, आदि का अच्छा समर्थन है।

मैं एक IE6 वातावरण में इस्तेमाल किया है, कुछ सीएसएस tweaks के साथ, और यह एक उचित सफलता थी।

उदाहरण के लिए, एक सीएसएस वर्ग numericInput को परिभाषित किया जा सकता है, और इसका उपयोग आपके क्षेत्रों को संख्यात्मक इनपुट मास्क के साथ सजाने के लिए किया जा सकता है।

ऑटोनोमेरिक वेबसाइट से अनुकूलित:

$('input.numericInput').autoNumeric({aSep: '.', aDec: ','}); // very flexible!

Comments

ऑटोनोमेरिक निश्चित रूप से जाने का रास्ता है

— प्रथेन

Answer 20

मुझे लगता है कि यह इस समस्या को हल करने का एक अच्छा तरीका है और यह बेहद सरल है:

$(function() {
    var pastValue, pastSelectionStart, pastSelectionEnd;

    $("input").on("keydown", function() {
        pastValue          = this.value;
        pastSelectionStart = this.selectionStart;
        pastSelectionEnd   = this.selectionEnd;
    }).on("input propertychange", function() {
        var regex = /^[0-9]+\.?[0-9]*$/;

        if (this.value.length > 0 && !regex.test(this.value)) {
            this.value          = pastValue;
            this.selectionStart = pastSelectionStart;
            this.selectionEnd   = pastSelectionEnd;
        }
    });
});

उदाहरण: JSFiddle

दृश्य कवर किए गए

यहां ऐसी ही अधिकांश सिफारिशें इनमें से कम से कम एक को विफल करती हैं या इन सभी परिदृश्यों को कवर करने के लिए बहुत सारे कोड की आवश्यकता होती है।

1. केवल 1 दशमलव बिंदु की अनुमति देता है।
2. अनुमति देता है home, endऔरarrow चाबियाँ।
3. अनुमति देता है deleteऔरbackspace किसी भी सूचकांक में इस्तेमाल किया जा सकता है।
4. किसी भी सूचकांक पर संपादन की अनुमति देता है (जब तक इनपुट रेगेक्स से मेल खाता है)।
5. वैध इनपुट के लिए ctrl + v और Shift + सम्मिलित करने देता है (राइट क्लिक + पेस्ट के साथ)।
6. keyupईवेंट का उपयोग नहीं किए जाने के कारण पाठ मान को फ़्लिकर नहीं करता है।
7. अमान्य इनपुट के बाद चयन पुनर्स्थापित करता है।

परिदृश्य विफल रहे

• 0.5केवल शून्य से शुरू करने और हटाने से काम नहीं चलेगा। यह regex को बदलकर /^[0-9]*\.?[0-9]*$/और फिर 0टेक्स्ट बॉक्स को दशमलव बिंदु (यदि वांछित हो) के साथ शुरू करने के लिए एक धब्बा घटना में जोड़कर ठीक किया जा सकता है । इसे ठीक करने के बेहतर तरीके के लिए इस उन्नत परिदृश्य को देखें ।

लगाना

मैंने इसे आसान बनाने के लिए यह सरल jquery प्लगइन बनाया :

$("input").limitRegex(/^[0-9]+\.?[0-9]*$/);

Answer 21

सबसे अच्छा तरीका यह है कि जब भी फोकस खोता है तो टेक्स्ट बॉक्स के कंटेस्टेंट्स को चेक करें।

आप देख सकते हैं कि क्या सामग्री एक नियमित अभिव्यक्ति का उपयोग करके "संख्या" है।

या आप सत्यापन प्लगइन का उपयोग कर सकते हैं, जो मूल रूप से स्वचालित रूप से ऐसा करता है।

Comments

नियमित अभिव्यक्ति /^\d*\.{0,1}\d+$/ होगा

— चेतन एस

Answer 22

डेटाबेस उपयोग के लिए इस खोज कोड की जाँच करें:

function numonly(root){
    >>var reet = root.value;
    var arr1 = reet.length;
    var ruut = reet.charAt(arr1-1);
    >>>if (reet.length > 0){
        var regex = /[0-9]|\./;
        if (!ruut.match(regex)){
            var reet = reet.slice(0, -1);
            $(root).val(reet);
        >>>>}
    }
}
//Then use the even handler onkeyup='numonly(this)'

Answer 23

यह एक स्निपेट है जो मैंने अभी किया है (एक टेक्स्टफील्ड (jQuery की आवश्यकता है) पर पूर्णांक प्रतिशत सत्यापन के लिए पीटर मॉर्टेंसन / कीथ बेंट्रुप द्वारा कोड का एक हिस्सा का उपयोग करके):

/* This validates that the value of the text box corresponds
 * to a percentage expressed as an integer between 1 and 100,
 * otherwise adjust the text box value for this condition is met. */
$("[id*='percent_textfield']").keyup(function(e){
    if (!isNaN(parseInt(this.value,10))) {
        this.value = parseInt(this.value);
    } else {
        this.value = 0;
    }
    this.value = this.value.replace(/[^0-9]/g, '');
    if (parseInt(this.value,10) > 100) {
        this.value = 100;
        return;
    }
});

यह कोड:

• मुख्य संख्यात्मक कुंजी और संख्यात्मक कीपैड का उपयोग करने की अनुमति देता है।
• शिफ्ट-न्यूमेरिक वर्णों (जैसे #, $,%, इत्यादि) को बाहर करने के लिए मान्य
• NaN मानों को 0 से बदलता है
• 100 की जगह 100 से अधिक मान

मुझे उम्मीद है कि इससे उन लोगों को मदद मिलेगी।

Answer 24

यहां एक शानदार समाधान मिला http://ajax911.com/numbers-numeric-field-jquery/

मैंने अपनी आवश्यकता के अनुसार बस "कीप" को "कीडाउन" में बदल दिया

Answer 25

यदि आप HTML5 का उपयोग कर रहे हैं, तो आपको सत्यापन करने के लिए किसी भी बड़ी लंबाई पर जाने की आवश्यकता नहीं है। महज प्रयोग करें -

<input type="number" step="any" />

कदम विशेषता दशमलव बिंदु को मान्य होने की अनुमति देता है।

Comments

ऐसा नहीं है, फ़ायरफ़ॉक्स और ओपेरा गैर-संख्यात्मक पाठ इनपुट की अनुमति देते हैं

— माइकल फीवर

@MichaelDeMutis आप सही हैं, यह गैर-संख्यात्मक पाठ इनपुट की अनुमति देता है लेकिन FF में सत्यापन विफल रहता है (मुझे ओपेरा में परीक्षण करने का अवसर नहीं मिला है)।

— जे ब्लांचार्ड

Answer 26

इनपुट पर कार्यस्थल की स्थिति को बनाए रखने के अन्य तरीके:

$(document).ready(function() {
  $('.numbersOnly').on('input', function() {
    var position = this.selectionStart - 1;

    fixed = this.value.replace(/[^0-9\.]/g, '');  //remove all but number and .
    if(fixed.charAt(0) === '.')                  //can't start with .
      fixed = fixed.slice(1);

    var pos = fixed.indexOf(".") + 1;
    if(pos >= 0)
      fixed = fixed.substr(0,pos) + fixed.slice(pos).replace('.', '');  //avoid more than one .

    if (this.value !== fixed) {
      this.value = fixed;
      this.selectionStart = position;
      this.selectionEnd = position;
    }
  });
});

लाभ:

1. उपयोगकर्ता तीर कुंजियों का उपयोग कर सकता है, बैकस्पेस, हटाएँ, ...
2. जब आप संख्याएँ चिपकाना चाहते हैं तब काम करता है

प्लंकर: डेमो वर्किंग

Answer 27

मुझे बस एक और बेहतर प्लग-इन मिला। आपको बहुत अधिक नियंत्रण देता है। मान लें कि आपके पास एक DOB फ़ील्ड है जहाँ आपको इसकी आवश्यकता है कि यह सांख्यिक है, लेकिन "/" या "-" अक्षर भी स्वीकार करता है।

यह बहुत अच्छा काम करता है!

इसे http://itgroup.com.ph/alphanumeric/ पर देखें ।

Answer 28

    $(".numeric").keypress(function(event) {
  // Backspace, tab, enter, end, home, left, right
  // We don't support the del key in Opera because del == . == 46.
  var controlKeys = [8, 9, 13, 35, 36, 37, 39];
  // IE doesn't support indexOf
  var isControlKey = controlKeys.join(",").match(new RegExp(event.which));
  // Some browsers just don't raise events for control keys. Easy.
  // e.g. Safari backspace.
  if (!event.which || // Control keys in most browsers. e.g. Firefox tab is 0
      (49 <= event.which && event.which <= 57) || // Always 1 through 9
      (48 == event.which && $(this).attr("value")) || // No 0 first digit
      isControlKey) { // Opera assigns values for control keys.
    return;
  } else {
    event.preventDefault();
  }
});

इस कोड ने मुझ पर बहुत अच्छा काम किया, मुझे बस इस अवधि का उपयोग करने के लिए कंट्रोलकेय सरणी में 46 जोड़ना था, हालांकि मुझे नहीं लगता कि यह करने का सबसे अच्छा तरीका है;)

Answer 29

मैंने इसका उपयोग किया, अच्छे परिणाम के साथ ।।

ini=$("#id").val();
a=0;
$("#id").keyup(function(e){
    var charcode = (e.which) ? e.which : e.keyCode;
    // for decimal point
    if(!(charcode===190 || charcode===110))
    {           // for numeric keys andcontrol keys
        if (!((charcode>=33 && charcode<=57) || 
        // for numpad numeric keys
        (charcode>=96 && charcode<=105) 
        // for backspace
        || charcode==8)) 
        {
            alert("Sorry! Only numeric values allowed.");
            $("#id").val(ini);
        }
        // to include decimal point if first one has been deleted.
        if(charcode===8)
        {
            ini=ini.split("").reverse();
            if(ini[0]==".")
            a=0;                 
        }
    }
    else
    {
        if(a==1)
        {
            alert("Sorry! Second decimal point not allowed.");
            $("#id").val(ini);
        }
        a=1;
    }
    ini=$("#id").val();
});


find keycodes at http://www.cambiaresearch.com/articles/15/javascript-char-codes-key-codes

Answer 30

यह बहुत आसान है कि हमारे पास पहले से ही एक जावास्क्रिप्ट इनबिल्ट फ़ंक्शन है "एनएएनएन" है।

$("#numeric").keydown(function(e){
  if (isNaN(String.fromCharCode(e.which))){ 
    return false; 
  }
});