在线测试效果及查看源码
部分在线测试用例
只能输入数字
<input onblur="value = value.replace(/[^0-9]/g,'')">
只能输入数字和小数点
<input onblur="value = value.replace(/[^\0-9\.]/g,'')">
只能输入英文
<input onblur="value = value.replace(/[^\a-\z\A-\Z0-9]/g,'')">
只能输入中文
<input onblur="value = value.replace(/[^\u4E00-\u9FA5]/g,'')">
只能输入中文、英文和数字
<input onblur="value = value.replace(/[^\a-\z\A-\Z0-9\u4E00-\u9FA5]/g,'')">
只能输入中文、英文、数字和空格
<input onblur="value = value.replace(/[^\a-\z\A-\Z0-9\u4E00-\u9FA5\ ]/g,'')">
只能输入英文和特殊字符
// 特殊字符暂定为：Unicode字符列表中的基本拉丁字符（u0020-u007F）可以配置
// [Unicode字符列表](https://zh.wikipedia.org/w/index.php?title=Unicode%E5%AD%97%E7%AC%A6%E5%88%97%E8%A1%A8)
<input onblur="value = value.replace(/[^\a-\z\A-\Z0-9\u0020-\u007F]/g,'')">
将输入的字母变为大写
<input onkeyup="value = value.toUpperCase()">
总结
方法
-
onblur在输入框失去焦点的时候触发事件 -
onkeyup在键盘输入的时候触发事件
规律
通过以上一个例子，我们可以清晰地发现，限制input输入框的内容，实际上就是控制value.replace(xxx,'')中xxx的正则表达式.
比如，我们实现用户只能输入中文且包含孤僻字的需求。
step1: 查询需要的汉字码表
| 区块 | 范围 | 实际汉字个数/备注 | 正则式 |
|---|---|---|---|
| CJK统一汉字 | 4E00-62FF, 6300-77FF,7800-8CFF, 8D00-9FFF. | 20,971/常见 | [\u4E00-\u9FFF] 或[一-鿆] |
| CJK统一汉字扩展A区 | 3400-4DBF. | 6,582/罕见 | [\u3400-\u4DBF] |
| CJK统一汉字扩展B区 | 20000-215FF, 21600-230FF,23100-245FF, 24600-260FF,26100-275FF, 27600-290FF,29100-2A6DF. | 42,711/罕见，历史 | [\U00020000-\U0002A6DF] |
| CJK统一汉字扩展C区 | 2A700-2B73F. | 4,149/罕见，历史 | [\U0002A700-\U0002B73F] |
| CJK统一汉字扩展D区 | 2B740–2B81F. | 222/不常见，仍在使用 | [\U0002B740-\U0002B81F] |
| CJK统一汉字扩展E区 | 2B820–2CEAF. | 5,762/罕见，历史 | [\U0002B820-\U0002CEAF] |
| CJK统一汉字扩展F区 | 2CEB0-2EBEF. | 7,473/罕见，历史 | [\U0002CEB0-\U0002EBEF] |
| CJK兼容汉字 | F900–FAFF. | 472/重复、可统一变体、公司定义 | [\uF900-\uFAFF] |
| CJK兼容汉字增补 | 2F800-2FA1F. | 542/可统一变体 | [\U0002F800-\U0002FA1F] |
step2:先匹配常用中文
// 常用中文（不包含孤僻字）
<input onblur="value = value.replace(/[^\u4E00-\u9FFF]/g'')">
step3: 在正则后面拼接你所需要的孤僻字正则表达式
比如我们需要CJK统一汉字扩展A区的孤僻字，我们在后面拼接\u3400-\u4DBF即可。
<input onblur="value = value.replace(/[^\u4E00-\u9FFF\u3400-\u4DBF]/g,'')">
