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

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

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

当前回答

您可以通过添加模式对文本输入使用HTML5验证。不需要使用regex或keyCodes手动验证。

<input type="text" pattern="[0-9.]+" />

$("input[type=text][pattern]").on("input", function () {
    if (!this.checkValidity())
        this.value = this.value.slice(0, -1);
});

可能，但对于输入[type=number]…

[type="number"]的问题是我们不能只删除最后的无效字符。当输入无效时，用户代理返回一个空字符串。

来自W3C HTML5规范:

如果元素的值不是有效的浮点数，则将其设置为空字符串。

https://dev.w3.org/html5/spec-LC/number-state.html#number-state

这意味着我们需要一种方法来手动存储之前的输入值。

对于数字输入，解是这样的:

$("input[type=number], input[type=text][pattern]").on("input", function () {
    if (!this.checkValidity())
        this.value = $(this).data("current-valid") || "";
    else
        $(this).data("current-valid", this.value);
});

不幸的是，这将不能在IE和EDGE上工作。对于这些浏览器，我们需要使用上面的模式解决方案。然而，您仍然可以使用这个简单的填充数字输入。

$("input[type=number]").attr("type", "text").attr("pattern", "[0-9.]+");

2018-04-12 14:08:34

其他回答

我根据@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;
        }
    });
});

2011-08-09 20:35:21

$(document).ready(function()
{
    $("#textBoxId").bind("change",checkInput);
});

function checkInput()
{
    // check if $('#textBoxId').val() is under your constraints
    // then change its value, removing the last character
    // since this event will be called each time you
    // type a character
}

2013-03-27 06:05:28

我建议检查事件。我也带着。如果设置为true，用户可能会执行类似cmd-A的操作来选择字段中的所有文本。你也应该承认这一点。

2011-11-06 21:23:32

你可以使用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

简短而甜蜜——即使在30多个答案之后，这一点永远不会得到太多关注;)

  $('#number_only').bind('keyup paste', function(){
        this.value = this.value.replace(/[^0-9]/g, '');
  });

2016-02-24 02:58:47

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

推荐文章

最新文章

标签