Question

我正在尝试创建一个输入字段，用户只能输入数字。这个功能对我来说已经很好了：

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

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

但问题是，当用户持有带有角色的键时，功能键盘不会触发....任何想法我怎么能禁止这个？

Answer 1

尝试绑定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/

Answer 2

我决定使用@Rahul Yadav提供的答案，但这是错误的，因为它没有考虑具有不同代码的num pad键。

在这里，您可以看到excerpt of the code table：

这是我实施的功能：

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;
}

Answer 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}))?)?$/验证整数和浮点数，例如。＆＃34; 12,12＆＃34;，＆＃34; 12.1＆＃34;，＆＃34; 12。＆＃34;。 重要的是号码＆＃34; 12。＆＃34; （最后点）也有效！否则用户无法进入任何期间。

然后提交正则表达式检查有效的浮点数([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');

Answer 4

试试这个解决方案：

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

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

同样的问题：

How to allow only numeric (0-9) in HTML inputbox using jQuery?
jQuery: what is the best way to restrict “number”-only input for textboxes? (allow decimal points)

Answer 5

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

<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>

Answer 6

我使用以下函数检查给定的字符串是否为数字。此实现适用于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;
    }

Answer 7

使用关键事件，使用event.key获取实际值。检查是否为整数：

isFinite(event.key);

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

<input type="number">

无论哪种方式，您都应该使用以下方法清除所有用户输入：

string.replace(/[^0-9]/g,'');

Answer 8

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>

jquery keyup函数检查数字

8 个答案: