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

其他回答

您可以使用这个非常简单的解决方案来实现同样的目的

$（“input.numbers”）.keypress（function（event） { 返回 /\d/.test（String.fromCharCode（event.keyCode））; }); <script src=“https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js”></script> <输入类型=“文本” 类=“数字” 名称=“field_name” />

我参考了这个链接来获得解决方案。它工作得很完美!!

2014-07-30 11:35:52

你可以尝试HTML5数字输入:

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

这个输入标记元素现在只接受0到9之间的值 min属性设置为0,Max属性设置为9。

欲了解更多信息，请访问http://www.w3schools.com/html/html_form_input_types.asp

2015-04-14 17:05:35

我想出了一个非常好的简单的解决方案，它不会像其他解决方案那样阻止用户选择文本或复制粘贴。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

2013-09-19 21:07:51

这似乎牢不可破。

// Prevent NULL input and replace text.
$(document).on('change', 'input[type="number"]', function (event) {
    this.value = this.value.replace(/[^0-9\.]+/g, '');
    if (this.value < 1) this.value = 0;
});

// Block non-numeric chars.
$(document).on('keypress', 'input[type="number"]', function (event) {
    return (((event.which > 47) && (event.which < 58)) || (event.which == 13));
});

2013-06-26 12:52:46

您可以通过添加模式对文本输入使用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

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

推荐文章

最新文章

标签