限制 input 输入框只能输入xxx
- 使用 onkeyup 事件,有 bug ,那就是在中文输入法状态下,输入汉字之后直接回车,会直接输入字母
- 使用 onchange 事件,在输入内容后,只有 input 丧失焦点时才会得到结果,并不能在输入时就做出响应
- 使用 oninput 事件,完美的解决了以上两种问题,测试暂时还没有出现其它问题。
原理就是在输入时会触发事件,事件会通过字符替换和正则表达式将不符合规范的替换掉(删除掉)
输入大小写字母、数字、下划线:
<input type="text" oninput="value=this.value.replace(/[^\w_]/g,'');">
输入小写字母、数字、下划线:
<input type="text" oninput="value=this.value.replace(/[^a-z0-9_]/g,'');">
输入数字和点
<input type="text" oninput="value=value.replace(/[^\d.]/g,'')">
输入中文:
<input type="text" oninput="value=this.value.replace(/[^\u4e00-\u9fa5]/g,'')">
输入数字:
<input type="text" oninput="value=this.value.replace(/\D/g,'')">
输入英文:
<input type="text" oninput="value=this.value.replace(/[^a-zA-Z]/g,'')">
输入中文、数字、英文:
<input oninput="value=value.replace(/[^\w\u4E00-\u9FA5]/g, '')">
输入数字和字母:
<input oninput="value=value.replace(/[\W]/g,'')">
只能输入英文字母和数字,不能输入中文
<input oninput="value=value.replace(/[^\w\.\/]/ig,'')">
只能输入数字和英文
<input oninput="value=value.replace(/[^\d|chun]/g,'')">