JavaScript限制input输入的各种方法汇总

本文主要汇总了JavaScript中对input输入的各种限制方法，包括取消按钮按下时的边框显示、设置文本框为只读、防止浏览器回退时清空文本、使用ENTER键移动光标、限制输入特定字符类型（如中文、数字、英文和数字混合）以及屏蔽输入法等。 1. 取消按钮按下时的虚线框：在HTML中，可以为提交按钮设置`hideFocus`属性为`true`，以避免在按钮被点击时出现虚线边框。例如： ```html <input type="submit" value="提交" hidefocus="true" /> ``` 2. 只读文本框内容：要使文本框内容不可编辑，可以设置`readonly`属性为`readonly`。例如： ```html <input type="text" readonly /> ``` 3. 防止退后清空的TEXT文档：对于文本框，可以通过CSS样式`behavior:url(#default#savehistory)`来保存历史记录，防止用户回退时内容被清除。例如： ```html <input type="text" style="behavior:url(#default#savehistory);" /> ``` 请注意，这种方法可能在某些浏览器中不支持。 4. ENTER键让光标移到下一个输入框：可以监听`onkeydown`事件，当用户按下ENTER键时，将键盘事件的keyCode改为9（Tab键的keyCode），实现光标移动。例如： ```html <input type="text" onkeydown="if(event.keyCode==13) event.keyCode=9" /> ``` 5. 限制输入为中文：通过监听`onkeyup`事件，用正则表达式替换非中文字符。例如： ```html <input type="text" onkeyup="value=value.replace(/[-~]/g,'')" onkeydown="if(event.keyCode==13) event.keyCode=9" /> ``` 6. 限制输入为数字：同样监听`onkeyup`事件，用正则表达式替换非数字字符，并处理`onbeforepaste`事件以阻止粘贴非数字内容。例如： ```html <input type="text" onkeyup="value=value.replace(/[^\d]/g,'')" onbeforepaste="clipboardData.setData('text', clipboardData.getData('text').replace(/[^\d]/g,''))" /> ``` 7. 无闪烁限制输入为数字：使用`ime-mode: disabled`禁用输入法，结合`onkeydown`事件阻止非数字键的输入。例如： ```html <input type="text" style="ime-mode: disabled" onkeydown="if(event.keyCode==13) event.keyCode=9" onkeypress="if((event.keyCode<48||event.keyCode>57)) event.returnValue=false" /> ``` 8. 限制输入英文和数字：监听`onkeyup`事件，用正则表达式替换非英文和数字字符。例如： ```html <input type="text" onkeyup="value=value.replace(/[\W]/g,'')" onbeforepaste="clipboardData.setData('text', clipboardData.getData('text').replace(/[^\d]/g,''))" /> ``` 9. 屏蔽输入法：为文本框设置`ime-mode: disabled`，以阻止输入法打开。例如： ```html <input type="text" name="url" style="ime-mode: disabled" onkeydown="..." /> ``` 这些方法提供了不同的input输入控制策略，可以根据实际需求组合使用，以实现更精细的用户输入验证和管理。在实际应用中，还应注意兼容性问题，确保在不同浏览器环境下都能正常工作。同时，为了提高用户体验，可以配合错误提示信息，引导用户正确输入。