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

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


当前回答

更新的解决方案,为更好的用户体验,解决了复制+粘贴问题,并替换了已弃用的keyCode属性:

超文本标记语言

<input type="tel">

jQuery

$('[type=tel]').on('change', function(e) {
  $(e.target).val($(e.target).val().replace(/[^\d]/g, ''))
})
$('[type=tel]').on('keypress', function(e) {
  keys = ['0','1','2','3','4','5','6','7','8','9']
  return keys.indexOf(event.key) > -1
})

细节:

首先,输入类型:

数字显示的上下箭头缩小了实际的输入空间,我发现它们很丑,只有当数字表示一个数量时才有用(比如电话、区号、id……)不需要) Tel提供类似的没有箭头的数字浏览器验证

使用[number / tel]也有助于在移动设备上显示数字键盘。

对于JS验证,我最终需要2个函数,一个用于正常的用户输入(按键),另一个用于复制+粘贴修复(更改),其他组合会给我一个糟糕的用户体验。

我使用更可靠的KeyboardEvent。key代替现在已弃用的KeyboardEvent.charCode

根据你的浏览器的支持,你可以考虑使用Array.prototype.includes()而不是名字不好的Array.prototype.indexOf() (true / false结果)

其他回答

这就是我最近写这篇文章的原因。我知道这个问题已经有人回答了,但我把它留到以后使用。

该方法只允许0-9键盘和numpad,退格,制表符,左右箭头(正常形式操作)

$(".numbersonly-format").keydown(function (event) {
    // Prevent shift key since its not needed
    if (event.shiftKey == true) {
        event.preventDefault();
    }
    // Allow Only: keyboard 0-9, numpad 0-9, backspace, tab, left arrow, right arrow, delete
    if ((event.keyCode >= 48 && event.keyCode <= 57) || (event.keyCode >= 96 && event.keyCode <= 105) || event.keyCode == 8 || event.keyCode == 9 || event.keyCode == 37 || event.keyCode == 39 || event.keyCode == 46) {
        // Allow normal operation
    } else {
        // Prevent the rest
        event.preventDefault();
    }
});

我把所有的答案结合在一起,得出了以下代码:

jQuery('#input_id', function(e){
    // Allow: backspace, delete, tab, escape, enter
    if (jQuery.inArray(e.keyCode, [46, 8, 9, 27, 13, 110]) !== -1 ||
        // Allow: Ctrl+A
        (e.keyCode === 65 && e.ctrlKey === true) ||
        // Allow: Ctrl+C
        (e.keyCode === 67 && e.ctrlKey === true) ||
        // Allow: Ctrl+X
        (e.keyCode === 88 && e.ctrlKey === true) ||
        // Disallow several dots (allow 190 only if no dots found)
        (e.keyCode === 190 && jQuery(this).val().indexOf('.') == -1) ||
        // Bug in some Android devices where it is always 229
        (e.keyCode === 229) ||
        // Allow: home, end, left, right
        (e.keyCode >= 35 && e.keyCode <= 40)) {
        // let it happen, don't do anything
        return;
    }
    // Ensure that it is a number and stop the keypress
    if ((e.shiftKey || (e.keyCode < 48 || e.keyCode > 57)) && (e.keyCode < 96 || e.keyCode > 105)) {
        e.preventDefault();
    }
});

此外,表单应该有autocomplete="off"。如果没有这个选项,你可能会在移动设备上遇到自动补全算法的问题。

为什么这么复杂?你甚至不需要jQuery,因为有一个HTML5的模式属性:

<input type="text" pattern="[0-9]*">

最酷的是它在移动设备上显示了一个数字键盘,这比使用jQuery好多了。

内联:

<输入名称=“号码”onkeyup=“if”值=这个值。“>

不显眼的风格(使用jQuery):

$(“输入[name = "数量"]”).keyup(函数(e) { 如果(\ D / g.test (this.value)) { //从输入值中过滤非数字。 这一点。Value = this.value。替换(\ D / g,”); } }); < script src = " https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js " > < /脚本> <输入名称= "数量" >

在输入文本中放入一个类,并将其命名为only_numbers

把jquery代码放在页面中

$(document).ready(function() {
    $('.only_numbers').keyup(function() {
        var numbers = $(this).val();
        $(this).val(numbers.replace(/\D/, ''));
    });
});

玩得开心:-)