时间戳

首页 > 解决方案 > 防止在 input type="number" 表单中使用不是数字的字母或键

javascript - 防止在 input type="number" 表单中使用不是数字的字母或键

问题描述

这似乎是一个简单的问题，我已经问过很多次了，但我现在有一大堆答案，这些答案有效和无效，有些我只是不明白。然后其他人说我使用的代码已被弃用。那么，这可以是一劳永逸的帖子吗？）

我有一个包含七个输入的表单。这七个输入中的每一个都需要一个介于 0 和 1000 之间的数字，并且最多可以有 3 个小数位。因此，999.999 和 0.001 一样会被接受。

不接受任何信件。不能接受负数。只能接受一位小数。

我有一个名为 dzCalculator 的表单，我将使用这样的事件监听器调用它：

document.getElementById("dzCalculator").addEventListener("keydown", validateForm)
function validateForm() {

我使用了各种“键码”？等，但告诉所有已弃用。

那么当一个按键被称为 preventDefault() 时，我可以使用什么代码来阻止该按键实际进入该字段以防止不正确和无效的表单提交。

我已经有了：

<input type="number" min="0" max="1000" step="0.001">

但这只是好的浏览器端，MDN 说这不应该是你使用的唯一防御，你绝对应该使用脚本。但是 MDN 忽略了告诉我们这些脚本是什么，对于我们初学者来说，这是一项非常艰巨的任务（尤其是当有这么多的答案返回时带有已弃用的代码，这让我被告知：P）

标签： javascriptvalidationinput

解决方案

仅检测击键并没有您想象的那么有用，请记住您仍然可以从剪贴板粘贴。我不会花太多时间在这方面，因为客户端验证只是用户的商品，而 HTML+CSS 可以处理其中的大部分。最多我会添加一些后备 JavaScript 来验证提交：

document.getElementById("dzCalculator").addEventListener("submit", function(event) {
   if (!document.querySelector('input[type="number"]').validity.valid) {
       event.preventDefault();
       alert("Invalid input, aborting submission");
   } else {
       alert("Everything's fine");
   }
});
input[type="number"] + div {
    display: none;
}
input[type="number"]:valid {
    background-color: #C4ECC7;
}
input[type="number"]:invalid {
    background-color: #EAC6C6;
}
input[type="number"]:invalid + div {
    display: block;
    color: #C66464; 
}
<form id="dzCalculator">
  <div>Number between 0 and 1000 and can have up to 3 decimal places:</div>
  <input type="number" min="0" max="1000" step="0.001">
  <div>Invalid number</div>
  <div><input type="submit" value="Submit"></div>
</form>

如果您有一些无法以原始 HTML 属性表示的规则，您可能希望通过为输入change事件添加事件侦听器来检查它们。

推荐阅读