vue输入框禁止输入表情的实现方法

在开发的功能交付测试的时候，测试提出来文本框不能输入表情的bug（这也算一个bug?哪位大神会进行这样的反人类操作啊），说归说，既然提出来了，那咱还得改不是，具体代码如下所示：

1. 首先声明一个输入框：

<a-form-item label="" name="searchValue">
      <a-input v-model:value.trim="formState.searchValue" autocomplete="off" placeholder="请输入姓名或工号" @change="checkValue" allowClear></a-input>
</a-form-item>

2. 定义输入框失去焦点的方法，在该方法里使用正则表达式

// 检查输入框内容是否包含特殊符号
        const checkValue = () => {
            const regStr = /[\uD83C|\uD83D|\uD83E][\uDC00-\uDFFF][\u200D|\uFE0F]|[\uD83C|\uD83D|\uD83E][\uDC00-\uDFFF]|[0-9|*|#]\uFE0F\u20E3|[0-9|#]\u20E3|[\u203C-\u3299]\uFE0F\u200D|[\u203C-\u3299]\uFE0F|[\u2122-\u2B55]|\u303D|[\A9|\AE]\u3030|\uA9|\uAE|\u3030/gi
            // 获取输入的最后一个字符
            let temp = state.formState.searchValue.charAt(state.formState.searchValue.length - 1)
            console.log(temp)
            // 对其进行正则校验
            temp = temp ? temp.replace(regStr, '') : ''
            // 把输入框的值的最后一个值由temp替代
            state.formState.searchValue = state.formState.searchValue.replace(state.formState.searchValue.charAt(state.formState.searchValue.length - 1), temp)

        }

思路：

获取到输入框每次输入的最后一个字符，然后判断该字符是表情还是正常输入的字符，如果是表情的话就替换成空字符串，然后在赋值给输入框双向绑定的值。

当然，上面的正则表达式中只包含了部分表情，比如♥这样的表情是不能输入的，但由于有些表情（😊）暂时没找到对应的代码，所以目前没有过滤到，以后遇到了会进行更新。