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

jQuery HTML

LGil

2020-03-16

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

我该如何使用jQuery?

第1832篇《如何使用jQuery在HTML输入框中仅允许数字(0-9)?》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

13个回答
小宇宙JinJinHarry 2020.03.16

您可以尝试输入HTML5数字:

<input type="number" placeholder="enter the number" min="0" max="9">

This input tag element would now take value only between 0 to 9 as min attribute is set to 0 and max attribute is set to 9.

for more information on visit http://www.w3schools.com/html/html_form_input_types.asp

A小卤蛋 2020.03.16

只需在Jquery中应用此方法,就可以验证文本框以仅接受数字。

function IsNumberKeyWithoutDecimal(element) {    
var value = $(element).val();
var regExp = "^\\d+$";
return value.match(regExp); 
}

在这里尝试此解决方案

蛋蛋L卡卡西 2020.03.16

这是我前段时间创建的快速解决方案。您可以在我的文章中阅读有关它的更多信息:

http://ajax911.com/numbers-numeric-field-jquery/

$("#textfield").bind("keyup paste", function(){
    setTimeout(jQuery.proxy(function() {
        this.val(this.val().replace(/[^0-9]/g, ''));
    }, $(this)), 0);
});
伽罗Pro 2020.03.16

我根据上面@ user261922的帖子写了我的文章,我对其进行了稍微的修改,以便可以选择所有选项卡,并且可以处理同一页面上的多个“仅数字”字段。

var prevKey = -1, prevControl = '';
$(document).ready(function () {
    $(".OnlyNumbers").keydown(function (event) {
        if (!(event.keyCode == 8                                // backspace
            || event.keyCode == 9                               // tab
            || event.keyCode == 17                              // ctrl
            || event.keyCode == 46                              // delete
            || (event.keyCode >= 35 && event.keyCode <= 40)     // arrow keys/home/end
            || (event.keyCode >= 48 && event.keyCode <= 57)     // numbers on keyboard
            || (event.keyCode >= 96 && event.keyCode <= 105)    // number on keypad
            || (event.keyCode == 65 && prevKey == 17 && prevControl == event.currentTarget.id))          // ctrl + a, on same control
        ) {
            event.preventDefault();     // Prevent character input
        }
        else {
            prevKey = event.keyCode;
            prevControl = event.currentTarget.id;
        }
    });
});
番长神乐小小 2020.03.16

我想到了一个非常好的,简单的解决方案,它不会像其他解决方案那样阻止用户选择文本或复制粘贴。jQuery样式:)

$("input.inputPhone").keyup(function() {
    var jThis=$(this);
    var notNumber=new RegExp("[^0-9]","g");
    var val=jThis.val();

    //Math before replacing to prevent losing keyboard selection 
    if(val.match(notNumber))
    { jThis.val(val.replace(notNumber,"")); }
}).keyup(); //Trigger on page load to sanitize values set by server
Pro逆天猿 2020.03.16

函数preventNonNumericInput(event){

    if( !(event.keyCode == 8                                // backspace
        || event.keyCode == 46                              // delete
        || (event.keyCode >= 35 && event.keyCode <= 40)     // arrow keys/home/end
        || (event.keyCode >= 48 && event.keyCode <= 57)     // numbers on keyboard
        || (event.keyCode >= 96 && event.keyCode <= 105))   // number on keypad
        ) {
            event.preventDefault();     // Prevent character input
    }
}
小胖MandyGil 2020.03.16

HTML5中的pattern属性指定用于检查元素值的正则表达式。

  <input  type="text" pattern="[0-9]{1,3}" value="" />

注意:pattern属性适用于以下输入类型:文本,搜索,URL,电话,电子邮件和密码。

  • [0-9]可以用任何正则表达式条件替换。

  • {1,3}代表最小1位数,最大3位数可以输入。

猴子 2020.03.16

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

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

最酷的是,它在移动设备上启动了数字键盘,这比使用jQuery更好。

Sam猪猪 2020.03.16

我在我们的内部通用js文件中使用它。我只是将类添加到需要此行为的任何输入中。

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

您可以使用此非常简单的解决方案来完成此操作

$("input.numbers").keypress(function(event) {
  return /\d/.test(String.fromCharCode(event.keyCode));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" class="numbers" name="field_name" />

我指的是该链接的解决方案。它完美地工作!!!

飞云猪猪前端 2020.03.16

您可以尝试输入HTML5 数字

<input type="number" value="0" min="0"> 

对于不兼容的浏览器,有ModernizrWebforms2后备。

神乐路易 2020.03.16

您可以像这样在输入事件上使用:

$(document).on("input", ".numeric", function() {
    this.value = this.value.replace(/\D/g,'');
});

但是,此代码特权是什么?

  • 它适用于移动浏览器(keydown和keyCode出现问题)。
  • 它也适用于AJAX生成的内容,因为我们使用的是“ on”。
  • 比击键更好的性能,例如粘贴事件。
小胖西里 2020.03.16

这是我使用的功能:

// Numeric only control handler
jQuery.fn.ForceNumericOnly =
function()
{
    return this.each(function()
    {
        $(this).keydown(function(e)
        {
            var key = e.charCode || e.keyCode || 0;
            // allow backspace, tab, delete, enter, arrows, numbers and keypad numbers ONLY
            // home, end, period, and numpad decimal
            return (
                key == 8 || 
                key == 9 ||
                key == 13 ||
                key == 46 ||
                key == 110 ||
                key == 190 ||
                (key >= 35 && key <= 40) ||
                (key >= 48 && key <= 57) ||
                (key >= 96 && key <= 105));
        });
    });
};

然后,您可以通过执行以下操作将其附加到控件上:

$("#yourTextBoxName").ForceNumericOnly();

问题类别

JavaScript Ckeditor Python Webpack TypeScript Vue.js React.js ExpressJS KoaJS CSS Node.js HTML Django 单元测试 PHP Asp.net jQuery Bootstrap IOS Android