javascript - एचटीएमएल पाठ इनपुट केवल संख्यात्मक इनपुट की अनुमति देता है




jquery html (20)

2 समाधान:

एक फॉर्म सत्यापनकर्ता का प्रयोग करें (उदाहरण के लिए jQuery सत्यापन प्लगइन के साथ )

नियमित अभिव्यक्ति के साथ, इनपुट क्षेत्र की घटना पर ऑनब्लूर (यानी जब उपयोगकर्ता फ़ील्ड छोड़ देता है) के दौरान एक जांच करें:

<script type="text/javascript">
function testField(field) {
    var regExpr = new RegExp("^\d*\.?\d*$");
    if (!regExpr.test(field.value)) {
      // Case of error
      field.value = "";
    }
}

</script>

<input type="text" ... onblur="testField(this);"/>

क्या HTML टेक्स्ट इनपुट ( <input type=text /> ) को केवल संख्यात्मक कीस्ट्रोक (प्लस '।') की अनुमति देने के लिए एक त्वरित तरीका है?


JQuery का उपयोग कर बस एक अन्य संस्करण

$(".numeric").keypress(function() {
    return (/\d/.test(String.fromCharCode(event.which) ))
});

आप इनपुट वैल्यू की तुलना भी कर सकते हैं (जिसे डिफ़ॉल्ट रूप से स्ट्रिंग के रूप में माना जाता है) को संख्यात्मक रूप से मजबूर करने के लिए, जैसे:

if(event.target.value == event.target.value * 1) {
    // returns true if input value is numeric string
}

हालांकि, आपको कुंजीपटल इत्यादि जैसी घटना को बांधना होगा।



इनपुट फ़ील्ड को एक वर्ग ( <input class="digit" ...> ) दें और नीचे दिए गए jquery का उपयोग करें।

jQuery(document).ready(function () {
            jQuery('input.digit').live('input keyup',function(e){ jQuery(this).val(jQuery(this).val().replace( /[^\d]/g ,'')); });
});

उपरोक्त कोड Ctrl+V स्ट्रोक में विशेष वर्ण अक्षम करने के लिए भी काम करता है और स्ट्रोक पर right click भी करता है।


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

<input type='text' onkeypress='validate(event)' />

और यह स्क्रिप्ट

function validate(evt) {
  var theEvent = evt || window.event;
  var key = theEvent.keyCode || theEvent.which;
  key = String.fromCharCode( key );
  var regex = /[0-9]|\./;
  if( !regex.test(key) ) {
    theEvent.returnValue = false;
    if(theEvent.preventDefault) theEvent.preventDefault();
  }
}

एक सुरक्षित दृष्टिकोण इनपुट के मूल्य की जांच कर रहा है, कुंजीपटल को अपहरण करने और कुंजीकोड फ़िल्टर करने की कोशिश करने के बजाय।

इस प्रकार उपयोगकर्ता कीबोर्ड तीर, संशोधक कुंजी, बैकस्पेस, डिलीट, गैर मानक कुंजीबोर्स का उपयोग करने के लिए स्वतंत्र है, पेस्ट करने के लिए माउस का उपयोग करें, ड्रैग और ड्रॉप टेक्स्ट का उपयोग करें, यहां तक ​​कि एक्सेसिबिलिटी इनपुट का भी उपयोग करें।

नीचे लिपि सकारात्मक और नकारात्मक संख्या की अनुमति देता है

1
10
100.0
100.01
-1
-1.0
-10.00
1.0.0 //not allowed

var input = document.getElementById('number');
input.onkeyup = input.onchange = enforceFloat;

//enforce that only a float can be inputed
function enforceFloat() {
  var valid = /^\-?\d+\.\d*$|^\-?[\d]*$/;
  var number = /\-\d+\.\d*|\-[\d]*|[\d]+\.[\d]*|[\d]+/;
  if (!valid.test(this.value)) {
    var n = this.value.match(number);
    this.value = n ? n[0] : '';
  }
}
<input id="number" value="-3.1415" placeholder="Type a number" autofocus>

संपादित करें: मैंने अपना पुराना उत्तर हटा दिया क्योंकि मुझे लगता है कि यह अब पुरातन है।


एचटीएमएल 5 regexes का समर्थन करता है, तो आप इसका उपयोग कर सकते हैं:

<input id="numbersOnly" pattern="[0-9.]+" type="text">

चेतावनी: कुछ ब्राउज़र अभी तक इसका समर्थन नहीं करते हैं।


और एक और उदाहरण, जो मेरे लिए बहुत अच्छा काम करता है:

function validateNumber(event) {
    var key = window.event ? event.keyCode : event.which;
    if (event.keyCode === 8 || event.keyCode === 46) {
        return true;
    } else if ( key < 48 || key > 57 ) {
        return false;
    } else {
        return true;
    }
};

कुंजीपटल घटना से भी संलग्न करें

$(document).ready(function(){
    $('[id^=edit]').keypress(validateNumber);
});

और एचटीएमएल:

<input type="input" id="edit1" value="0" size="5" maxlength="5" />

यहां एक जेएसफ़िल उदाहरण है


कृपया नीचे उल्लिखित समाधान पाएं। इस उपयोगकर्ता में केवल numeric मान दर्ज करने में सक्षम हो सकता है, उपयोगकर्ता भी इनपुट में copy , paste , drag और drop में सक्षम नहीं हो सकता है।

अनुमत वर्ण

0,1,2,3,4,5,6,7,8,9

घटनाओं के माध्यम से वर्ण और अक्षर की अनुमति नहीं है

  • वर्णमाला मूल्य
  • विशेष वर्ण
  • प्रतिलिपि
  • चिपकाएं
  • खींचें
  • ड्रॉप

$(document).ready(function() {
  $('#number').bind("cut copy paste drag drop", function(e) {
      e.preventDefault();
  });     
});
function isNumberKey(evt) {
    var charCode = (evt.which) ? evt.which : evt.keyCode;
    if (charCode > 31 && (charCode < 48 || charCode > 57))
        return false;
    return true;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<input type="text" class="form-control" name="number" id="number" onkeypress="return isNumberKey(event)" placeholder="Enter Numeric value only">

अगर यह काम नहीं करता है तो मुझे बताएं।


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

function validateNumber(evt) {
    var e = evt || window.event;
    var key = e.keyCode || e.which;

    if (!e.shiftKey && !e.altKey && !e.ctrlKey &&
    // numbers   
    key >= 48 && key <= 57 ||
    // Numeric keypad
    key >= 96 && key <= 105 ||
    // Backspace and Tab and Enter
    key == 8 || key == 9 || key == 13 ||
    // Home and End
    key == 35 || key == 36 ||
    // left and right arrows
    key == 37 || key == 39 ||
    // Del and Ins
    key == 46 || key == 45) {
        // input is VALID
    }
    else {
        // input is INVALID
        e.returnValue = false;
        if (e.preventDefault) e.preventDefault();
    }
}

अतिरिक्त आप अल्पविराम, अवधि और ऋण (, .-) जोड़ सकते हैं

  // comma, period and minus, . on keypad
  key == 190 || key == 188 || key == 109 || key == 110 ||

एचटीएमएल

<input type="text" onkeydown="validateNumber(event);"/ >

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

function validate(evt)
{
    if(evt.keyCode!=8)
    {
        var theEvent = evt || window.event;
        var key = theEvent.keyCode || theEvent.which;
        key = String.fromCharCode(key);
        var regex = /[0-9]|\./;
        if (!regex.test(key))
        {
            theEvent.returnValue = false;

            if (theEvent.preventDefault)
                theEvent.preventDefault();
            }
        }
    }

HTML कोड:

<input type='text' name='price' value='0' onkeypress='validate(event)'/>

पूरी तरह से काम करता है क्योंकि बैकस्पेस कीकोड 8 है और एक रेगेक्स अभिव्यक्ति इसे नहीं देती है, इसलिए यह बग को बाईपास करने का एक आसान तरीका है :)


बहुत आसन....

// एक जावास्क्रिप्ट फ़ंक्शन में (HTML या PHP का उपयोग कर सकते हैं)।

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

आपके फॉर्म इनपुट में:

<input type=text name=form_number size=20 maxlength=12 onkeypress='return isNumberKey(event)'>

इनपुट अधिकतम के साथ। (ये उपरोक्त 12 अंकों की संख्या के लिए अनुमति देता है)


मैंने इसके अच्छे जवाब के लिए लंबे और कठिन खोज की है, और हमें बेहद जरूरी <input type="number" , लेकिन इससे कम, ये 2 सबसे संक्षिप्त तरीके हैं जिनके साथ मैं आ सकता हूं:

<input type="text" 
       onkeyup="this.value=this.value.replace(/[^\d]/,'')">

यदि आप मिटाए जाने से पहले एक स्प्लिट-सेकेंड के लिए दिखाए गए गैर-स्वीकृत चरित्र को नापसंद करते हैं, तो नीचे दी गई विधि मेरा समाधान है। कई अतिरिक्त स्थितियों पर ध्यान दें, यह नेविगेशन और हॉटकी के सभी प्रकारों को अक्षम करने से बचने के लिए है। अगर कोई जानता है कि इसे कैसे संक्षिप्त किया जाए, तो हमें बताएं!

<input type="text" 
onkeydown="return ( event.ctrlKey || event.altKey 
                    || (47<event.keyCode && event.keyCode<58 && event.shiftKey==false) 
                    || (95<event.keyCode && event.keyCode<106)
                    || (event.keyCode==8) || (event.keyCode==9) 
                    || (event.keyCode>34 && event.keyCode<40) 
                    || (event.keyCode==46) )">

यदि आप अल्फा या न्यूमेरिक के बीच डिवाइस (शायद एक मोबाइल फोन) को सुझाव देना चाहते हैं तो आप <input type="number"> उपयोग कर सकते हैं।


यह geowa4 के समाधान का विस्तारित संस्करण है। min और max विशेषताओं का समर्थन करता है। यदि संख्या सीमा से बाहर है, तो पिछले मान दिखाया जाएगा।

आप इसे यहां देख सकते हैं।

उपयोग: <input type=text class='number' maxlength=3 min=1 max=500>

function number(e) {
var theEvent = e || window.event;
var key = theEvent.keyCode || theEvent.which;
if(key!=13&&key!=9){//allow enter and tab
  key = String.fromCharCode( key );
  var regex = /[0-9]|\./;
  if( !regex.test(key)) {
    theEvent.returnValue = false;
    if(theEvent.preventDefault) theEvent.preventDefault();
    }   
  }
}

$(document).ready(function(){
    $("input[type=text]").filter(".number,.NUMBER").on({
        "focus":function(e){
         $(e.target).data('oldValue',$(e.target).val());
            },
        "keypress":function(e){
                e.target.oldvalue = e.target.value;
                number(e);
            },
        "change":function(e){
            var t = e.target;
            var min = $(t).attr("min");
            var max = $(t).attr("max");
            var val = parseInt($(t).val(),10);          
            if( val<min || max<val)
                {
                    alert("Error!");
                    $(t).val($(t).data('oldValue'));
                }

            }       
    });     
});

यदि इनपुट गतिशील हैं तो इसका उपयोग करें:

$(document).ready(function(){
    $("body").on("focus","input[type=text].number,.NUMBER",function(e){
        $(e.target).data('oldValue',$(e.target).val());
    }); 
    $("body").on("keypress","input[type=text].number,.NUMBER",function(e){
        e.target.oldvalue = e.target.value;
        number(e);
    }); 
    $("body").on("change","input[type=text].number,.NUMBER",function(e){
        var t = e.target
        var min = $(t).attr("min");
        var max = $(t).attr("max");
        var val = parseInt($(t).val());         
        if( val<min || max<val)
            {
                alert("Error!");
                $(t).val($(t).data('oldValue'));
            }
    }); 
});

सबसे अच्छा तरीका (सभी प्रकार की संख्याओं को अनुमति दें - असली नकारात्मक, असली सकारात्मक, iinteger नकारात्मक, पूर्णांक सकारात्मक) है:

$(input).keypress(function (evt){
    var theEvent = evt || window.event;
    var key = theEvent.keyCode || theEvent.which;
    key = String.fromCharCode( key );
    var regex = /[-\d\.]/; // dowolna liczba (+- ,.) :)
    var objRegex = /^-?\d*[\.]?\d*$/;
    var val = $(evt.target).val();
    if(!regex.test(key) || !objRegex.test(val+key) || 
            !theEvent.keyCode == 46 || !theEvent.keyCode == 8) {
        theEvent.returnValue = false;
        if(theEvent.preventDefault) theEvent.preventDefault();
    };
}); 

input type="number" एक HTML5 विशेषता है।

दूसरे मामले में यह आपकी मदद करेगा:

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

<input type="number" name="somecode" onkeypress="return isNumberKey(event)"/>

यहां अधिकांश उत्तरों में कुंजी-घटनाओं का उपयोग करने की कमजोरी है

कई उत्तरों कुंजीपटल मैक्रोज़, कॉपी + पेस्ट और अधिक अवांछित व्यवहार के साथ टेक्स्ट चयन करने की आपकी क्षमता को सीमित कर देंगे, अन्य विशिष्ट jQuery प्लगइन पर निर्भर करते हैं, जो मशीनगन्स के साथ मक्खियों को मार रहा है।

इनपुट तंत्र (कीस्ट्रोक, कॉपी + पेस्ट, राइटक्लिक कॉपी + पेस्ट, भाषण-टू-टेक्स्ट इत्यादि) के बावजूद, यह सरल समाधान मेरे लिए क्रॉस प्लेटफार्म के लिए सबसे अच्छा काम करता प्रतीत होता है। सभी टेक्स्ट चयन कीबोर्ड मैक्रोज़ अभी भी काम करेंगे, और यह स्क्रिप्ट द्वारा गैर-संख्यात्मक मान सेट करने की क्षमता को सीमित भी करेगा।

function forceNumeric(){
    var $input = $(this);
    $input.val($input.val().replace(/[^\d]+/g,''));
}
$('body').on('propertychange input', 'input[type="number"]', forceNumeric);

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE>Allow Only Numbers
</HEAD>

<BODY>
<script language="JavaScript">
function onlyNumbers(evt)
{
var e = event || evt; // for trans-browser compatibility
var charCode = e.which || e.keyCode;

if (charCode > 31 && (charCode < 48 || charCode > 57))
    return false;

return true;

}
</script>
<input type="text" onkeypress="return onlyNumbers();">
</BODY>
</HTML>




html5