当我给输入类型编号时,字母e和特殊字符也显示在输入字段中。我只想显示数字。如何屏蔽它们?
e
<input type="number">
beq87vna1#
如果您不喜欢传入的密钥值,请尝试阻止默认行为:
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">
htzpubme2#
您可以使用keydown事件阻止输入这些字符
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(); } });
1e
当您输入1e时发生的情况是,输入字段检查它是否是数字,如果不是(1e不是),它会抛出一个警告:指定的值“1E”不是有效数字。该值必须与以下正则表达式匹配:-?(\d+|\d+.\d+|.\d+)([EE][-+]?\d+)?
value属性设置为""。
value
""
如果检查该字段的属性,您会发现valueAsNumber属性。如果输入的值是数字,则输入字段解析该值并将其存储在valueAsNumber中。由于1e不是数字,因此它的计算结果为NaN,NaN被分配给valueAsNumber,value被设置为""。但是您仍然可以在输入字段中看到1e。
valueAsNumber
NaN
我已经问了一个与这个问题相关的问题,但还没有解决方案。
Get the entered value on number input field, not the parsed
hpxqektj3#
这是我在Reaction中使用的一个简单解决方案。
onKeyDown={(evt) => ["e", "E", "+", "-"].includes(evt.key) && evt.preventDefault()}
3条答案
按热度按时间beq87vna1#
如果您不喜欢传入的密钥值,请尝试阻止默认行为:
htzpubme2#
您可以使用
keydown
事件阻止输入这些字符但是,如果用户进行复制/粘贴(或通过控制台),则用户仍然可以输入它们。要防止复制/粘贴,可以对输入的值[*]进行替换。
1e
,建议的解决方案将失败。当您输入
1e
时发生的情况是,输入字段检查它是否是数字,如果不是(1e
不是),它会抛出一个警告:指定的值“1E”不是有效数字。该值必须与以下正则表达式匹配:-?(\d+|\d+.\d+|.\d+)([EE][-+]?\d+)?
value
属性设置为""
。如果检查该字段的属性,您会发现
valueAsNumber
属性。如果输入的值是数字,则输入字段解析该值并将其存储在valueAsNumber
中。由于1e
不是数字,因此它的计算结果为NaN
,NaN
被分配给valueAsNumber
,value
被设置为""
。但是您仍然可以在输入字段中看到1e
。我已经问了一个与这个问题相关的问题,但还没有解决方案。
Get the entered value on number input field, not the parsed
hpxqektj3#
这是我在Reaction中使用的一个简单解决方案。