输入框禁止输入表情和特殊符号

技术背景

react+ant Design
我使用的 Input 组件。

实现方式

实现方式很简单,就是在 onChange 事件中过滤掉表情和特殊符号。

过滤方法封装

1
2
3
4
5
6
7
8
9
export function clearEmoji(text) {
const regEmoji = /[^\u0020-\u007E\u00A0-\u00BE\u2E80-\uA4CF\uF900-\uFAFF\uFE30-\uFE4F\uFF00-\uFFEF\u0080-\u009F\u2000-\u201f\u2026\u2022\u20ac\r\n]/g;
return text.replace(regEmoji, "");
}

export function clearEmojiAndSymbol(text) {
const regSymbol = /[`~!@#$%^&*()_\-+=<>?:"{}|,.\/;\\[\]·~!@#¥%……&*()——\-+={}|《》?:“”【】、;‘’,。、]/g;
return clearEmoji(text).replace(regSymbol, "");
}

调用代码

1
2
3
4
5
6
7
8
9
10
11
12
13
<Input
size="large"
disabled={isDisable}
value={account}
onChange={this.onChangeAccount}
maxLength={20}
placeholder="请填写登录账号(至少包含一个字母)"
/>;

onChangeAccount = e => {
const { onChange } = this.props;
onChange("account", clearEmojiAndSymbol(e.target.value));
};

汉字只能打印一个的坑

在测试上面的方法时,一切都很顺利,但是在测试输入汉字时,有个奇怪的现象,就是输入汉字的时候,当打出第二个汉字时,搜狗输入法的框就消失了,打印的拼音就被自动填充到输入框中。

原因

经过测试,如果不走验证特殊字符的方法就没问题,说明不是 replace 的时候影响了输入法,于是在验证特殊字符的方法中 debugger 了一下。

原来是因为输入法在输入多个汉字的时候,每个拼音之间有一个单引号'
这样导致匹配成功,所以被 replace 了,输入结果被改变了;
输入法得到的只是字母,没有单引号,也就没有匹配的汉字,输入框就自动关闭了。

解决方法
把匹配特殊字符串中的单引号去掉,就没这个问题了,哈哈,所以这个有个小漏洞就是单引号是可以输入的,小声告诉你

文章作者: wenmu
文章链接: http://blog.wangpengpeng.site/2020/01/09/%E8%BE%93%E5%85%A5%E6%A1%86%E7%A6%81%E6%AD%A2%E8%BE%93%E5%85%A5%E8%A1%A8%E6%83%85%E5%92%8C%E7%89%B9%E6%AE%8A%E7%AC%A6%E5%8F%B7/
版权声明: 本博客所有文章除特别声明外,均采用 CC BY-NC-SA 4.0 许可协议。转载请注明来自 温木的博客
微信打赏