如何在输入类型 Number 中阻止 ,-,e？

Question

当我给出输入类型编号时，字母 e 并且特殊字符也会显示在输入字段中。我只想显示数字。如何阻止他们？

 <input type="number">

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

Answer 1

如果您不喜欢传入的键值，请尝试阻止默认行为：

 document.querySelector(".your_class").addEventListener("keypress", function (evt) {
    if (evt.which != 8 && evt.which != 0 && evt.which < 48 || evt.which > 57)
    {
        evt.preventDefault();
    }
});

// 0 for null values
// 8 for backspace
// 48-57 for 0-9 numbers

 <input type="number" class="your_class">

原文由 Sidharth Gusain 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

您可以使用 keydown 事件阻止输入这些字符

 var inputBox = document.getElementById("inputBox");

var invalidChars = [
  "-",
  "+",
  "e",
];

inputBox.addEventListener("keydown", function(e) {
  if (invalidChars.includes(e.key)) {
    e.preventDefault();
  }
});

 <input type="number" id="inputBox" />

但是如果他/她复制/粘贴（或通过控制台），用户仍然可以输入它们。为防止复制/粘贴，您可以对输入的值[*]进行替换。

 var inputBox = document.getElementById("inputBox");

var invalidChars = [
  "-",
  "+",
  "e",
];

inputBox.addEventListener("input", function() {
  this.value = this.value.replace(/[e\+\-]/gi, "");
});

inputBox.addEventListener("keydown", function(e) {
  if (invalidChars.includes(e.key)) {
    e.preventDefault();
  }
});

 <input type="number" id="inputBox" />

---

\* 您无法真正获取类型设置为数字的输入字段中输入的值。只要是数字就可以得到输入的值，即通过内部数字校验的值。如果用户复制/粘贴 1e ，建议的解决方案将失败。

当您输入 1e 时会发生什么，输入字段会检查它是否为数字，如果不是（ 1e 不是）它会引发警告：

指定的值“1e”不是有效数字。该值必须与以下正则表达式匹配：-?(\d+|\d+.\d+|.\d+)([eE][-+]?\d+)?

并且 value 属性设置为 "" 。

如果您检查该字段的属性，您会发现 valueAsNumber 属性。如果输入的值为数字，则输入字段解析该值并将其存储在 valueAsNumber 中。 Since 1e is not a number, it evaluates to NaN , and NaN is assigned to valueAsNumber and value 设置为 "" 。尽管您仍然在输入字段中看到 1e 。

我已经问过与此问题相关的问题，但还没有解决方案。

获取数字输入字段中输入的值，而不是解析的值

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