如何允许只有数字(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

其他回答

为了更详细地说明#3的答案，我将执行以下操作(注意:仍然不支持通过键盘或鼠标粘贴操作):

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

2010-03-08 16:50:28

更新的解决方案，为更好的用户体验，解决了复制+粘贴问题，并替换了已弃用的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结果)

2017-04-05 04:32:43

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

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

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

2011-12-06 18:56:29

只需要在Jquery中应用此方法，您可以验证您的文本框只接受数字。

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

试试这个解决方案

2014-01-29 05:29:01

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

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

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

[0-9]可以替换为任意正则表达式条件。 {1,3}表示可以输入1的最小值和3的最大值。

2015-01-19 12:11:55

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

推荐文章

最新文章

标签