如何允许只有数字(0-9)在HTML输入框使用jQuery?

我正在创建一个网页，其中我有一个输入文本字段，我想只允许数字字符，如(0,1,2,3,4,5…9)0-9。

我如何使用jQuery做到这一点?

当前回答

你可以使用HTML5输入类型number来限制数字输入:

<input type="number" name="someid" />

这将只在HTML5投诉浏览器工作。确保你的html文档的doctype是:

<!DOCTYPE html>

一般来说，你可以像下面这样进行JS验证:

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

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

如果你想允许小数，用这个替换" If条件":

if (charCode > 31 && (charCode != 46 &&(charCode < 48 || charCode > 57)))

来源:HTML文本输入只允许数字输入

JSFiddle demo： http://jsfiddle.net/Gagan_Gami/nSjy7/333/

2014-06-11 13:34:18

其他回答

对于你正在寻找的东西来说，它可能是多余的，但我建议使用jQuery插件autonnumeric() -它很棒!

您可以只限制数字，十进制精度，最大/最小值等。

http://www.decorplanit.com/plugin/

2011-12-06 18:56:29

jQuery("#no_of").keypress(function(event){
    //Allow only backspace and delete
    if (event.keyCode != 46 && event.keyCode != 8) {
        if (!parseInt(String.fromCharCode(event.which))) {
            event.preventDefault();
        }
    }
});

jQuery("#no_of").keyup(function(e){
    var temp_s= jQuery("#no_of").val();
    var multiply_val= temp_s*10;
    jQuery("#ex-r").html(multiply_val);
});

2011-01-25 06:58:26

我在我们的内部common js文件中使用了这个。我只是将类添加到需要这种行为的任何输入中。

$(".numericOnly").keypress(function (e) {
    if (String.fromCharCode(e.keyCode).match(/[^0-9]/g)) return false;
});

2011-02-14 19:47:32

我想帮点忙，我做了我的版本，onlyNumbers函数…

function onlyNumbers(e){
    var keynum;
    var keychar;

    if(window.event){  //IE
        keynum = e.keyCode;
    }
    if(e.which){ //Netscape/Firefox/Opera
        keynum = e.which;
    }
    if((keynum == 8 || keynum == 9 || keynum == 46 || (keynum >= 35 && keynum <= 40) ||
       (event.keyCode >= 96 && event.keyCode <= 105)))return true;

    if(keynum == 110 || keynum == 190){
        var checkdot=document.getElementById('price').value;
        var i=0;
        for(i=0;i<checkdot.length;i++){
            if(checkdot[i]=='.')return false;
        }
        if(checkdot.length==0)document.getElementById('price').value='0';
        return true;
    }
    keychar = String.fromCharCode(keynum);

    return !isNaN(keychar);
}

只需添加输入标签“…输入……id="price" onkeydown="return onlyNumbers(event)"…"然后你就完成了;)

2010-12-07 05:05:41

这是我用来验证整数或浮点值的数字输入(不显眼的jQuery风格):

$('input[name="number"]').keyup(function(e) { var float = parseFloat($(this).attr('data-float')); /* 2 regexp for validating integer and float inputs ***** > integer_regexp : allow numbers, but do not allow leading zeros > float_regexp : allow numbers + only one dot sign (and only in the middle of the string), but do not allow leading zeros in the integer part *************************************************************************/ var integer_regexp = (/[^0-9]|^0+(?!$)/g); var float_regexp = (/[^0-9\.]|^\.+(?!$)|^0+(?=[0-9]+)|\.(?=\.|.+\.)/g); var regexp = (float % 1 === 0) ? integer_regexp : float_regexp; if (regexp.test(this.value)) { this.value = this.value.replace(regexp, ''); } }); <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <input type="text" data-float="1" id="number" name="number" placeholder="integer"> <input type="text" data-float="0.1" id="number" name="number" placeholder="float">

2017-04-28 23:11:21

如何允许只有数字(0-9)在HTML输入框使用jQuery?

推荐文章

最新文章

标签