如何使 HTML 输入标签只接受数值？

小编典典

如何使 HTML 输入标签只接受数值？

all

我需要确保某个<input>字段仅将数字作为值。输入不是表单的一部分。因此它不会被提交，因此在提交期间进行验证不是一种选择。我希望用户不能输入除数字以外的任何字符。

有没有一种巧妙的方法来实现这一目标？

阅读 108

2022-08-15

共1个答案

小编典典

HTML 5

您可以使用HTML5 输入类型
number来限制仅数字条目：

<input type="number" name="someid" />

这仅适用于 HTML5 投诉浏览器。确保您的 html 文档的 doctype 是：

<!DOCTYPE html>

另请参阅 https://github.com/jonstipe/number-
polyfill以获得旧浏览器中的透明支持。

JavaScript

更新： 有一个新的非常简单的解决方案：

它允许您对文本使用任何
类型的输入过滤器<input>，包括各种数字过滤器。这将正确处理复制+粘贴、拖放、键盘快捷键、上下文菜单操作、不可键入的键和所有键盘布局。
。

出于一般目的，您可以进行 JS 验证，如下所示：

function isNumberKey(evt){
    var charCode = (evt.which) ? evt.which : evt.keyCode
    if (charCode > 31 && (charCode < 48 || charCode > 57))
        return false;
    return true;
}

<input name="someid" type="number" onkeypress="return isNumberKey(event)"/>

如果您想允许小数，请用以下内容替换“if 条件”：

if (charCode > 31 && (charCode != 46 &&(charCode < 48 || charCode > 57)))

JSFiddle 演示：http:
//jsfiddle.net/viralpatel/nSjy7/

2022-08-15