在线测试效果及查看源码

部分在线测试用例

只能输入数字

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