JavaScript 限制文本框仅输入数字和小数点

实现目标与原理

我们需要实现一个元素，满足以下行为：

• 正常输入数字 (0-9) 和小数点 (.)。
• 输入字母或其他符号时，文本框无反应，不显示字符。
• 通过键盘粘贴内容时，自动过滤掉非数字和非小数点的字符。

这主要通过组合使用键盘事件 (onkeydown)、失去焦点事件 (onblur) 以及粘贴事件 (onbeforepaste) 来实现。

具体操作步骤

第1步：引入核心脚本代码

将以下 JavaScript 代码嵌入到 HTML 页面的 <script> 标签中。该代码动态创建一个符合要求的输入框并添加到页面中。

<script>
var s = "<input type=\"text\" size=\"20\" " +
"style=\"text-align:center\" " +
// 限制键盘按键：只允许数字(48-57)和可能的其他控制键，排除非数字和非小数点
"onkeydown=\"if(event.keyCode>57&&event.keyCode!=190) return false\" " + 
// 限制失去焦点时的内容：移除所有非数字和非小数点的字符
"onblur=\"value=value.replace(/[^0-9\.]/g,'')\" " + 
// 限制粘贴操作：先获取剪贴板数据，过滤后再设置回去
"onbeforepaste=\"clipboardData.setData(\"text\"," + 
"clipboardData.getData(\"text\").replace(/[^0-9\.]/g,''))\">";
document.write(s);
</script>

第2步：理解关键属性逻辑

1. onkeydown 判断：
   - event.keyCode > 57：大多数非数字字符的 ASCII 码大于 57（数字 '9' 的码值）。此条件拦截了大部分非法按键。
   - event.keyCode != 190：ASCII 190 对应的是 '.' (小数点)。允许输入小数点。
   - 注意：此方法主要依赖浏览器默认的回退机制，若 return false 则取消按键。
2. onblur 清理：
   - value.replace(/[^0-9\.]/g, '')：当输入框失去焦点时触发。正则表达式 /[^0-9\.]/g 匹配任何不是数字或小数的字符，并将其替换为空字符串。这是防止用户在支持直接粘贴特殊字符的浏览器中绕过键盘限制的最后一道防线。
3. onbeforepaste 拦截：
   - 在标准模式下，现代浏览器通常保护 clipboardData。这段代码主要用于兼容旧版 IE 或特定环境下的粘贴行为。它试图在粘贴发生前，从剪贴板获取文本，应用同样的正则过滤，然后重新写入剪贴板。由于浏览器安全策略的变化，此部分代码在现代 Chrome/Firefox/Edge 中可能不生效，因此 onblur 和输入法层面的校验依然重要。

第3步：验证与测试

运行包含上述代码的 HTML 文件：

• 尝试输入字母 'a'，观察文本框是否变空或无变化。
• 尝试输入 '123.45'，确认正常显示。
• 尝试复制包含 'abc123' 的文本并粘贴，检查最终显示为 '123'（取决于浏览器对 onbeforepaste 的支持程度，若不支持，请手动修改或依赖失焦时的清理）。

注意事项与排错

由于不同浏览器对 onbeforepaste 的支持存在差异，且 event.keyCode 在新版标准中也逐渐被 e.key 或 e.code 取代，对于严格的现代 Web 开发，建议考虑以下改进：

• Input Type：如果不需要小数点，直接使用 <input type="number"> 是最原生且兼容性最好的方式，但它限制了小数输入样式且在某些移动端键盘显示可能不佳。
• Modern JS 替代方案：可以使用 input 事件配合正则表达式进行实时替换，例如：
  input.addEventListener('input', (e) => { e.target.value = e.target.value.replace(/[^0-9.]/g, ''); });
  这种方式更通用，不受浏览器安全策略对 clipboardData 的限制。

以上就是使用 JavaScript 限制文本框仅输入数字和小数点的详细内容，更多关于 JavaScript 表单验证与交互技巧的资料请关注本站其它相关文章！