自助建站系统,手机可以制作app软件吗,邯郸推广公司,动画制作专业就业前景问题#xff1a;
后台不提供富文本存储#xff0c;所以emoji表情入库会报错需求要求前端在输入的时候过滤掉表情符号全局的input 和富文本textarea输入框都需要过滤emoji表情 分析#xff1a;
1.每一个input写事件写正则校验代码量实在太多了还很麻烦#xff1b;所以想用…问题
后台不提供富文本存储所以emoji表情入库会报错需求要求前端在输入的时候过滤掉表情符号全局的input 和富文本textarea输入框都需要过滤emoji表情 分析
1.每一个input写事件写正则校验代码量实在太多了还很麻烦所以想用自定义全局指令就不需要每个用到的地方都去引入了。 2.emoji太多了并且输入法的emoji、mac自带的emoji 、windows自带的emoji是不一致的。全部emoji列出来一一过滤替换实在不现实后来发现emoji表情都是2个字符的长度其他键盘输入都是一个字符的长度。因此用字符长度来校验可行 3.需要在输入的时候过滤掉表情符号那么就需要在keyup键盘触发的时候监听触发过滤事件 js实现输入框监听方法 common/utils/emoji
const findEle (parent, type) { return parent.tagName.toLowerCase() type ? parent : parent.querySelector(type)
}
const trigger (el, type) { // 给元素绑定事件const e document.createEvent(HTMLEvents)e.initEvent(type, true, true)el.dispatchEvent(e)
}const emoji {// el指令所绑定的元素可以用来直接操作 DOM。// vnodeVue 编译生成的虚拟节点bind: function (el, binding, vnode) { // 指令第一次绑定到元素时调用// 判断是否是emoji图标const isEmoji char {// 表情都是2个字符return char.length 1;}const emoji2empty str { // emoji图标都替换成空字符串‘’return Array.from(str).filter(c !isEmoji(c)).join()}let $inp findEle(el, input) || findEle(el, textarea) // 判断绑定元素是否是input输入框或者富文本输入框el.$inp $inp $inp.handle function () {let val $inp.value$inp.value emoji2empty(val) // 监听输入框的emoji图标转换成空trigger($inp, input)}$inp.addEventListener(keyup, $inp.handle) // el添加键盘监听事件keyup$inp.addEventListener(blur, $inp.handle) // el添加键盘失焦事件blur},unbind: function (el) { // 只调用一次指令与元素解绑时调用。el.$inp.removeEventListener(keyup, el.$inp.handle) el.$inp.removeEventListener(blur, el.$inp.handle)},
}
export default emoji入口文件引入emoji并且全局注入指令 Vue.directive( id, [definition] ) id 为指令唯一id {Function | Object} [definition] 注册的指令 一个指令定义对象可以几个钩子函数 (均为可选)这里使用到bind和unbind bind只调用一次指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置。 unbind只调用一次指令与元素解绑时调用。 基础用法
el-inputv-emojiv-bindcontrolv-modelvaluemaxlength99import emoji from /utils/emoji
