17

我正在尝试创建一个用户只能输入数字的输入字段。这个功能对我来说已经几乎可以正常工作了:

        $('#p_first').keyup(function(event){
        if(isNaN(String.fromCharCode(event.which))){
            var value = $(this).val();

            $(this).val(value.substr(0,value.length-1));
        }
    });

但问题是,当用户持有带有字符的键时,功能 keyup 不会触发....有什么想法可以禁止这个吗?

4

8 回答 8

37

尝试绑定到keypress事件而不是keyup. 当一个键被按住时它会被反复触发。当按下的键不是您可以调用的数字时preventDefault(),这将使键不会被放置在输入标签中。

   $('#p_first').keypress(function(event){

       if(event.which != 8 && isNaN(String.fromCharCode(event.which))){
           event.preventDefault(); //stop character from entering input
       }

   });

工作示例:http: //jsfiddle.net/rTWrb/2/

于 2013-06-20T08:56:01.967 回答
6

我决定使用@Rahul Yadav 提供的答案,但这是错误的,因为它不考虑具有不同代码的数字键盘键。

在这里,您可以看到代码表的摘录

这里我实现的功能:

function isNumberKey(e) {
    var result = false; 
    try {
        var charCode = (e.which) ? e.which : e.keyCode;
        if ((charCode >= 48 && charCode <= 57) || (charCode >= 96 && charCode <= 105)) {
            result = true;
        }
    }
    catch(err) {
        //console.log(err);
    }
    return result;
}
于 2015-06-23T14:34:39.960 回答
3

试试这个解决方案:

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

演示:http: //jsfiddle.net/DbRTj/

相同的问题:

于 2013-06-20T09:03:35.847 回答
3

最好的方法是检查输入值,而不是按键。因为在使用字符码时,有制表符、箭头、退格等字符需要勾选。

该代码在用户按下一个键后检查输入值:

$('#p_first').keyup(function(){
    while(! /^(([0-9]+)((\.|,)([0-9]{0,2}))?)?$/.test($('#p_first').val())){
        $('#p_first').val($('#p_first').val().slice(0, -1));
    }
});

While 循环删除最后一个字符,直到输入值有效。正则表达式/^(([0-9]+)((\.|,)([0-9]{0,2}))?)?$/验证整数和浮点数,例如。“12,12”、“12.1”、“12.”。数字“12”很重要。(最后点)也有效!否则用户不能输入任何句点。

然后在提交正则表达式检查有效的浮点数([0-9]{1,2}),而不是([0-9]{0,2})

$('form').submit(function(e){
    if(! /^([0-9]+)((\.|,)([0-9]{1,2}))?$/.test($('#p_first').val())){
        $('#p_first').addClass('error');
        e.preventDefault();
    }
});

注意:最好赋值给$('#p_first')变量。var input = $('#p_first');

于 2015-11-24T10:52:15.720 回答
0

试试这个..它可能有用。

<HTML>
<input type="text" name="qty" id="price" value="" style="width:100px;" field="Quantity" class="required">
</HTML>

<script>
 $(document).ready(function() {
$('#price').live('keyup',function(){
        this.value = this.value.replace(/[^0-9\.]/g,'');
        });
});
</script>
于 2015-04-29T06:26:16.063 回答
0

我使用以下函数来检查给定的字符串是否为数字。此实现适用于 keyup 和 keydown 并且还处理数字键盘键

// Validate Numeric inputs
function isNumber(o) {
    return o == '' || !isNaN(o - 0);
}

假设您在 keyup 或 keydown 事件上的键码在 keyCode 变量中:

var keyCode = e.keyCode || e.which;
if (keyCode >= 96 && keyCode <= 105) {
        // Numpad keys
        keyCode -= 48;
}
console.log(isNumber(String.fromCharCode(keyCode)));
console.log(isNumber($(this).val() + String.fromCharCode(keyCode)));

如果 isNumber 的返回值为 false,则返回 false:

    var txtVal = $(this).val() + String.fromCharCode(keyCode);
    if (!isNumber(txtVal)) {
        e.returnValue = false;
    }
于 2017-03-21T02:19:01.553 回答
0

带有按键事件,用于event.key获取实际值。检查是否为整数:

isFinite(event.key);

一个更简单的 HTML 解决方案是使用number类型输入。它仅限于数字(种类)。

<input type="number">

无论哪种方式,您都应该使用以下命令清除所有用户输入:

string.replace(/[^0-9]/g,'');
于 2017-09-05T17:47:54.173 回答
-1
JavaScript:

  function isNumberKey(a){
  var x=a.val();
  a.val(x.replace(/[^0-9\.]/g,''));

}

HTML:

     <td><input type="text" name="qty" onkeypress="onkeyup="return isNumberKey($(this));"" value="" style="width:100px;" field="Quantity" class="required"></td>
于 2015-03-24T10:10:08.723 回答