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

Question

当我输入输入类型编号时,字母e和特殊字符也会显示在输入字段中.我想只显示数字.如何阻止他们？

<input type="number">

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">

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" />

*您无法在类型设置为number的输入字段上获得输入的值.您可以获取输入的值,只要它是一个数字,即该值通过内部数字检查.如果用户复制/粘贴1e,建议的解决方案将失败.

当你输入时会发生什么1e,输入字段检查它是否是一个数字,如果它不是(1e不是)它会抛出一个警告:

指定值"1e"不是有效数字.该值必须与以下正则表达式匹配: - ？(\ d + |\d +.\ d + | |.\ d +)([eE] [ - +]？\ d +)？

并且value属性设置为"".

如果您检查字段的属性,您将找到valueAsNumber属性.如果输入的值是数字,则输入字段将解析该值并将其存储在中valueAsNumber.由于1e它不是数字,因此它将计算NaN,NaN分配给valueAsNumber并value设置为"".虽然您仍然1e在输入字段中看到.

我问了一个与这个问题有关的问题,但还没有解决方案.

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

Answer 3

我在 React 中使用的一个简单解决方案。

onKeyDown={(evt) => ["e", "E", "+", "-"].includes(evt.key) && evt.preventDefault()}

Answer 4

而是尝试阻止值时，可以尝试替换非数字值。

如果您选择处理的键码，你将不得不把手numKeys，numPad，shift +，crtl +等，试图刷新，而重点是内部的文本框也将失败。防止默认值将使错误值超出很多。

$("#input").on("input", function() {
  var nonNumReg = /[^0-9]/g
  $(this).val($(this).val().replace(nonNumReg, ''));
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="tel" id="input" />
<div class="alert"></div>

Answer 5

遵循上述答案的形式，上面的大多数示例都涵盖了它，我只是注意到在输入“E”时这仍然是允许的，所以我认为最好将其添加到数组中。我在这个例子中使用了Jquery 3.3.1。

同样，您输入数组的任何内容都将被阻止输入到输入框中

注意 - 如果要将其应用于 JQuery 中所有类型为数字的输入，请将 'elementid' 作为要应用此元素的元素的 id --> $("input[type='number']" )

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

$("input[type='number']").on("keydown", function(e){ 
    if(invalidChars.includes(e.key)){
         e.preventDefault();
    }
}):

上面的这个示例应该适用于所有类型为数字的输入，并防止字符“-”、“e”、“+”和“E”被键入到输入中。

更新

只是还注意到您可以输入“。” 因为它们代表对数字有效的小数点。我正在使用这个验证电话号码，显然（对于英国）没有“。” 所以这也可能是要添加到数组中的另一个字符。

Answer 6

这是一个基于其他一些解决方案的使用 jQuery 的非常简洁的解决方案：

$("input[type=number]").on("keydown", function(e) {
        var invalidChars = ["-", "+", "e"]; //include "." if you only want integers
        if (invalidChars.includes(e.key)) {
            e.preventDefault();
        }
});

Answer 7

您可以检查它是否是数字。

// Restrict e, -, + for html input number
$(document).on('keypress', ':input[type="number"]', function (e) {
    if (isNaN(e.key)) {
        return false;
    }
});