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

Posted 2023-02-22

【中文标题】只允许在文本框中输入数字[重复]

【英文标题】：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;

【参考方案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 不支持类型号和最小值