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

需积分: 50 20 下载量 165 浏览量 更新于2024-09-12 收藏 3KB TXT 举报
本文主要汇总了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输入控制策略,可以根据实际需求组合使用,以实现更精细的用户输入验证和管理。在实际应用中,还应注意兼容性问题,确保在不同浏览器环境下都能正常工作。同时,为了提高用户体验,可以配合错误提示信息,引导用户正确输入。