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

Posted 2023-03-05

【中文标题】如何在输入类型Number中阻止+，-，e？

【英文标题】：How to block +,-,e in input type Number?

【发布时间】：2017-01-10 13:06:33

【问题描述】：

当我提供输入类型编号时，字母 e 和特殊字符也会显示在输入字段中。我只想显示数字。怎么屏蔽？

<input type="number">

【问题讨论】：

您是在项目中使用 Angular 还是只是打错了标签？

1e1 是一个有效数字，即exponential notation。

@Aaron，你是对的，但 OP 只想显示数字。

我知道 1e1 是一个有效数字...但我只想显示 0-9 之间的数字...有什么办法可以阻止它们？

这不是 How to make type=“number” to positive numbers only 的副本。这些答案不会妨碍科学记数法。 （一个答案尝试，但它不起作用。）

【参考方案1】：

你可以使用 jQuery 轻松做到这一点

试试这个代码

$(function() 
    $("#input").keypress(function(event) 
        if (event.which != 8 && event.which != 0 && (event.which < 48 || event.which > 57)) 
            $(".alert").html("Enter only digits!").show().fadeOut(2000);
            return false;
        
    );
);

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

【参考方案2】：

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

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

【讨论】：

用户仍然可以复制粘贴 12e.+-

这将破坏 html5 中的最小/最大验证

if (evt.which != 8 && evt.which != 46 && evt.which 57 || evt.key=='.') 12...34

如何防止复制粘贴 12e.+- –

【参考方案3】：

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

如果您选择处理键码，则必须处理 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>

【讨论】：

我猜他希望输入类型是数字（以获得微调器）

【参考方案4】：

您可以使用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 中。由于1e 不是数字，它的计算结果为NaN，NaN 被分配给valueAsNumber，value 被设置为""。尽管您仍然在输入字段中看到1e。

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

Get the entered value on number input field, not the parsed

【讨论】：

@downvoter 否决者愿意解释他的理由吗？我怀疑这个答案没有用。

非常好的解决方案，其他答案看起来像肮脏的把戏，或者没用。投票！

【参考方案5】：

由于 OP 的问题被标记为“angularjs”，最简洁的解决方案可能是使用指令。之前已在此处解释了此方法的几种解决方案：

angularjs: allows only numbers to be typed into a text box

【参考方案6】：

如果您想 + 登录您的电话号码字段，则可以使用此代码。

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

【参考方案7】：

$("#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>

【讨论】：

这个答案应该包含一些解释。仅发布代码 sn-p 不是一个好的答案。

【参考方案8】：

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

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

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

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

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

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

更新

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

【讨论】：

添加“.”到 invalidChars 以防止像 12...34

这样的输入

我想你还是想要 .对于字符串中的小数类型

【参考方案9】：

你可以使用一些 JQuery 代码来阻止

 $('input[Type="Number"]').keypress(function (e) 
    if ('0123456789'.indexOf(e.key) == -1) 
        e.preventDefault();
    
);

这将影响所有数字类型的输入

【参考方案10】：

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

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

【参考方案11】：

你可以检查它是否是一个数字。

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

【讨论】：

这会禁用退格、删除、制表符、回车

【参考方案12】：

JQuery 如果要接受小数（。）也可以使用以下代码

$('input[Type="Number"]').keypress(function (e) 
    if ('0123456789'.indexOf(e.key)!=-1)
    else if (e.key=='.' && this.value!='' && (this.value.match("\.") || []).length==0)
    elsee.preventDefault();
);

【参考方案13】：

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

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

【参考方案14】：

我不确定您的用例的详细信息，但您自己可能不需要做很多事情来处理这些。对于初学者，您可以设置一个min，它可用于防止负面影响，以及一个max 值和一个step 值（如果有用的话）。原来默认步长是 1，所以它需要整数，除非您指定小数步长值。

在处理数字中的“e”时，可以使用 Number() 将文本转换为数字，它会自动转换“e”以及任何“+”号：

> Number("5e3") 
5000
> Number("+42") 
42

如果您确实需要对提交的值进行规范化，您可以将其转换回原位。我认为可能对用户最友好的时间是模糊：

input.addEventListener('blur', () => 
  if (input.value !== '' && input.checkValidity()) 
    input.value = Number(input.value);
  
);