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

一尘不染

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

html

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

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

阅读 394

2020-05-10

共1个答案

一尘不染

HTML 5

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

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

这仅在HTML5投诉浏览器中有效。确保您的html文档的doctype为：

<!DOCTYPE html>

的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)))

2020-05-10