技术背景

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

实现方式

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

过滤方法封装

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, "");
}

调用代码

<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 了，输入结果被改变了;
输入法得到的只是字母，没有单引号，也就没有匹配的汉字，输入框就自动关闭了。

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