限制 input 输入框只能输入xxx

5,168 阅读1分钟

限制 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,'')">