背景
在一些需要用户输入数字的场景中，我们通常使用 HTML5 中的 input 标签，并将其类型 type 设置为 number。但是，这种输入框的输入方式不仅仅限制了用户只能输入数字，还允许他们输入其他字符（例如字母或符号）。这可能会导致数据不准确或程序崩溃。
所以，在前端开发中，我们需要对这种情况进行处理，确保用户只能输入数字。
解决方案
使用正则表达式
通过正则表达式匹配输入的值是否为数字，如果不是数字，则阻止默认事件的发生。
<input type="number" oninput="this.value=this.value.replace(/[^0-9]/g,'');">
上述代码将 oninput 事件绑定到输入框上，每当用户输入时，函数将检查输入值是否为数字。如果不是数字，它将使用空字符串替换该值，从而有效地防止了非数字字符的输入。
使用 JavaScript
我们也可以使用 JavaScript 来实现相同的功能。首先，我们需要获取输入框元素，然后添加一个监听器来检测用户输入的字符。如果输入的字符不是数字，我们就可以阻止默认行为并阻止输入。
-- -------------------- ---- -------
------ ------------- -------------
--------
----- ----- - -----------------------------------
------------------------------- ---------- -
----- ----- - ------------------
-- ------ -- ------------------------- -
---------- - ---
---------------------- ------------------------
-
---
---------在上述示例中，我们使用 addEventListener 监听输入事件，然后使用正则表达式检查输入值是否为数字。如果输入值不是数字，则将输入框的值设置为空字符串，并触发一个 invalid 自定义事件。
结论
在前端开发中，我们需要处理用户输入非数字的情况，以确保程序的准确性和稳定性。使用正则表达式或 JavaScript 监听器可以有效地防止非数字字符的输入，从而提高用户体验和数据准确性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/26953