只允许在文本框中输入数字[重复]答案

【问题标题】：Allow only numbers to be typed in a textbox [duplicate]只允许在文本框中输入数字[重复]
【发布时间】：2011-11-09 21:13:27
【问题描述】：

如何在没有 jquery 或任何库的情况下只允许在此文本框中写入数字？

<input type="text" class="textfield" value="" id="extra7" name="extra7">

【问题讨论】：

你把什么归类为数字？这些数字是12.3、-4、V、six吗？
不确定 jquery 问题是否重复。 Javascript != jQuery
这不是所引用问题的完全重复。这以 javascript 答案为目标，而另一个以 jQuery 答案为目标。不同的受众，不同的解决方案。
最短的答案是 onkeypress='return event.charCode>31 && (event.charCode = 57)'
const onlyNumbers = (event) => { event.preventDefault();常量 asciiCode = event.target.value.charCodeAt(0); (asciiCode 57) ? event.target.value = '' : event.target.value = event.target.value; }

标签： javascript

【解决方案1】：

您可以订阅 onkeypress 事件：

<input type="text" class="textfield" value="" id="extra7" name="extra7" onkeypress="return isNumber(event)" />

然后定义isNumber函数：

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

你可以在action here看到它。

【讨论】：

我不确定如何解释您的 if 子句。如果大于 57，则始终大于 31。我认为您可以去掉括号。
如果你 c/p 一些文本就不行了
我仍然可以在文本框中复制和粘贴非数值
不适用于移动设备（Android + Chrome）
只接受来自键盘字母部分的数值。为什么此功能不接受位于键盘右侧的数字小键盘键？

【解决方案2】：

使用 HTML5 你可以做到

<input type="number">

您还可以使用正则表达式模式来限制输入文本。

<input type="text" pattern="^[0-9]*$" />

【讨论】：

这不会阻止输入非数字字符。
@MyNameIsKo 应该可以，也许您使用的客户端不支持这种 HTML5 功能？
它在 Chrome 或 Firefox 中都不起作用。您可能指的是非数字字符的提交验证，它确实适用于 HTML5。然而，最初的问题是对完全阻止非数字输入感兴趣。我很确定 JavaScript 仍然是做到这一点的唯一方法。
允许 "." ，这可能是不可取的
Firefox 不支持类型号。

【解决方案3】：

您还可以使用一些 HTML5 属性，一些浏览器可能已经利用了它们 (type="number" min="0")。

无论您做什么，请记住在服务器端重新检查您的输入：您永远不能假设客户端验证已经执行。

【讨论】：

Firefox 不支持类型号和最小值