JavaScript限制input输入的各种方法汇总
需积分: 50 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输入控制策略,可以根据实际需求组合使用,以实现更精细的用户输入验证和管理。在实际应用中,还应注意兼容性问题,确保在不同浏览器环境下都能正常工作。同时,为了提高用户体验,可以配合错误提示信息,引导用户正确输入。
2020-12-10 上传
点击了解资源详情
2021-05-26 上传
2020-10-24 上传
2020-10-25 上传
2010-12-23 上传
2012-08-03 上传
l723723
- 粉丝: 0
- 资源: 11
最新资源
- 探索AVL树算法:以Faculdade Senac Porto Alegre实践为例
- 小学语文教学新工具:创新黑板设计解析
- Minecraft服务器管理新插件ServerForms发布
- MATLAB基因网络模型代码实现及开源分享
- 全方位技术项目源码合集:***报名系统
- Phalcon框架实战案例分析
- MATLAB与Python结合实现短期电力负荷预测的DAT300项目解析
- 市场营销教学专用查询装置设计方案
- 随身WiFi高通210 MS8909设备的Root引导文件破解攻略
- 实现服务器端级联:modella与leveldb适配器的应用
- Oracle Linux安装必备依赖包清单与步骤
- Shyer项目:寻找喜欢的聊天伙伴
- MEAN堆栈入门项目: postings-app
- 在线WPS办公功能全接触及应用示例
- 新型带储订盒订书机设计文档
- VB多媒体教学演示系统源代码及技术项目资源大全