如何让 HTML input 标签只接受数值？

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

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

原文由 chtenb 发布，翻译遵循 CC BY-SA 4.0 许可协议

阅读 492

HTML 5

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

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

这仅适用于 HTML5 兼容浏览器。确保您的 html 文档的文档类型是：

<!DOCTYPE html>

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

JavaScript

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

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

请参阅此答案或在 JSFiddle 上自己尝试。

对于一般用途，您可以进行如下 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 condition”：

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

来源： HTML文本输入只允许数字输入

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

原文由 Viral Patel 发布，翻译遵循 CC BY-SA 4.0 许可协议

如何让 HTML input 标签只接受数值？

HTML 5

JavaScript

你尚未登录，登录后可以

问一个鼠标滚动事件，这种是怎么实现的？

element-plus的el-input如何去除聚焦时候的蓝色边框？

form对象根据表单dom元素的name属性获取元素对象是基于什么标准的？兼容性如何？

threejs用octree实现房间内第三人称漫游并且添加了碰撞，人物在碰撞到墙壁的时候不停的弹回，应该怎么修改才能不会疯狂的弹回？

Vue为什么说textarea标签不支持插值表达式的？

为什么下面的代码内部的 div 其 100% 高度可以跳过上层元素?

单页应用网站缓存不是由于index.html文件被缓存导致的吗？

Stack Overflow 翻译