在前端开发中，经常需要对用户输入的数据进行校验和限制。其中一个常见的需求就是限制文本框只允许输入数字和小数点，本文将介绍如何实现这个功能。
纯 HTML 实现
可以使用 HTML 的 pattern 属性来限制输入内容。该属性接受一个正则表达式作为值，用于验证输入内容是否符合要求。下面是一个只允许输入数字和小数点的示例：
<input type="text" pattern="\d+(\.\d+)?" />
这个正则表达式的含义是：\d+ 匹配一个或多个数字，(\.\d+)? 匹配一个小数点和一个或多个数字，问号表示这一部分匹配可选。这样就能够限制用户输入数字和小数点了。
不过，这种方式有一个问题，即在用户输入非法字符时无法给出友好的提示信息。因此，我们通常会结合 JavaScript 来实现更加完善的限制。
结合 JavaScript 实现
使用 JavaScript 的方法可以在用户输入非法字符时及时给出提示信息，并阻止输入。下面是一个简单的示例代码：
-- -------------------- ---- -------
------ ----------- ---------------- --
---- --------------------
--------
----- ----- - ---------------------------------------
----- -------- - ------------------------------------
------------------------------- -- -- -
----- ----- - ------------
-- --------------
-- ----------------------- -
----------- - ------------------------- ----
------------------ - -------------
- ---- -
------------------ - ---
-
---
---------这段代码给文本框添加了一个 input 事件监听器，在用户输入时进行校验。如果输入的内容包含非数字或小数点的字符，则将其中的非法字符过滤掉，并显示错误信息。否则清空错误信息。
总结
限制文本框只允许输入数字和小数点是一项常见的前端开发任务，可以使用 HTML 的 pattern 属性实现基本的校验，也可以结合 JavaScript 实现更加完善的限制和提示。在实际开发中，可以根据具体需求选择不同的实现方式，并根据需要进行自定义扩展。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/11428
