防止表单输入类型=“数字”中的负输入？
Posted
技术标签:
【中文标题】防止表单输入类型=“数字”中的负输入？【英文标题】：Prevent negative inputs in form input type="number"? 【发布时间】：2015-10-13 01:23:57 【问题描述】：我想将用户输入限制为 html 表单中的正数。
我知道您可以设置 min="0"，但是可以通过手动输入负数来绕过它。
有没有其他方法可以在不编写验证函数的情况下解决这个问题？
【问题讨论】：
在 HTML 5 中你可以这样做： 我认为这是将用户输入限制为正数的最优雅的方式没有编写验证函数的数字。 @GoodBadandUgly — 问题中提到了这一点及其局限性。 请注意，用户总是可以绕过这些限制！如果您向服务器端提交任何内容（读取 db 或数据获取功能），无论如何您都必须再次验证。 为什么要阻止用户而不向他显示错误消息？如果用户尝试输入 -10，你给他一个完全不同的 10，他甚至可能不会注意到你改变了他的意图（用户在打字时看着键盘）。这是什么原理？！我希望开发人员不要再这样做了。 【参考方案1】：这使用 javascript，但您不必编写自己的验证例程。相反，只需检查 validity.valid 属性。当且仅当输入在范围内时才会如此。
<html>
<body>
<form action="#">
<input type="number" name="test" min=0 oninput="validity.valid||(value='');"><br>
<input type="submit" value="Submit">
</form>
</body>
</html>【讨论】：
真的很棒！它只允许最小值和最大值之间的数字，而不是像其他人建议的那样编写javascript代码，最好使用这个 oninput="validity.valid||(value='');" 这个解决方案的唯一问题是，当输入无效值时，它会完全清除先前输入的值。 我们如何防止输入有问题的密钥而不清除整个字段？ 你可以使用<input type="number" name="test" min=0 save="" oninput="validity.valid ? this.save = value : value = this.save;"> 之类的东西 显然，这不应该按原样使用......你应该编写自己的处理函数来检查validity.valid并做正确的事情。跨度>
有没有办法将其转换为可重用函数，然后通过 addEventListener 附加它？ （我实际上正在使用 React）更喜欢可重用的函数。【参考方案2】：
如果不验证输入的值，这是不可能的。
input type=number
type属性值为“数字”的input元素代表了一个精确的控件，用于将元素的值设置为一个代表数字的字符串。
由于它是一个表示数字的字符串，因此无法确定该字符串是否表示数值。
Permitted 属性不会让您验证数字输入控件的值。
在 JavaScript 的帮助下执行此操作的一种方法可能如下所示。
// Select your input element.
var numInput = document.querySelector('input');
// Listen for input event on numInput.
numInput.addEventListener('input', function()
// Let's match only digits.
var num = this.value.match(/^\d+$/);
if (num === null)
// If we have no match, value will be empty.
this.value = "";
, false)<input type="number" min="0" />如果您计划将数据发送到服务器，请务必同时验证服务器上的数据。 客户端 JavaScript 无法确保发送的数据是您所期望的。
【讨论】：
【参考方案3】：如果您想确保默认值，即最小值或任何其他值，这是可行的解决方案。这也阻止了清除输入字段。同样的方式你也可以设置它的最大值。
<input type="number" min="1" max="9999" maxlength="4" oninput="this.value=this.value.slice(0,this.maxLength||1/1);this.value=(this.value < 1) ? (1/1) : this.value;">【讨论】：
> "这也是防止清除输入字段" 否。这会清除输入并填充最小值。不清除 - 当您输入 123- 并在字段中看到 123。【参考方案4】：以下脚本只允许在输入中输入数字或退格键。
var number = document.getElementById('number');
number.onkeydown = function(e)
if(!((e.keyCode > 95 && e.keyCode < 106)
|| (e.keyCode > 47 && e.keyCode < 58)
|| e.keyCode == 8))
return false;
<input type="number" id="number" min="0">【讨论】：
这限制性太强，因为它不允许用户在字段之外使用标签 - 对于快速数据输入应用程序或辅助技术（例如，无法使用鼠标标签进入字段然后他们被卡住了）【参考方案5】：type="number" 已经解决了只允许输入数字的问题，正如此处其他答案所指出的那样。
仅供参考：使用jQuery，您可以使用以下代码覆盖焦点输出的负值：
$(document).ready(function()
$("body").delegate('#myInputNumber', 'focusout', function()
if($(this).val() < 0)
$(this).val('0');
);
);
这不会取代服务器端验证！
【讨论】：
【参考方案6】：在 html 上放置 onKeypress 事件监听器
<input type="text" onkeypress="validate(event)">
像这样编写验证函数：
<script>
function validate(event)
if (event.key == "-")
event.preventDefault();
return false;
</script>
如果 angularjs 通过 $event 代替 event，我已经在 angularjs 和 javascript 中对此进行了测试
【讨论】：
【参考方案7】：方式 01：
模板：
<input name="price" type="number" (keydown)="onKeydown($event)" min="0" required />
文件名.ts：
onKeydown(event: KeyboardEvent): boolean
if (!((event.keyCode > 95 && event.keyCode < 106)
|| (event.keyCode > 47 && event.keyCode < 58)
|| event.keyCode === 8))
return false;
return true;
方式 02：
模板：
<input name="price" type="number" min="0" oninput="this.value = Math.abs(this.value)" required />
【讨论】：
abs 不正确，因为它只是将值翻转为绝对值。正确的方法是使用 max 和 0 作为第二个参数【参考方案8】：在 HTML5 中，我喜欢这种方式。它也非常适合角度。
<input type="number" min="0" oninput="this.value = Math.abs(this.value)">
【讨论】：
你为什么要这样做？这不是我输入的……如果我想输入 -3，那你为什么要把它转换成 3 呢？理由是什么？！这完全没有意义。以上是关于防止表单输入类型=“数字”中的负输入？的主要内容，如果未能解决你的问题，请参考以下文章
为什么React / Redux表单中的输入会将数字更改为字符串？