首页 > 其他 > 详细

vue自定义全局指令v-emoji限制input输入表情和特殊字符

时间:2022-05-27 23:31:03      阅读:64      评论:0      收藏:0      [点我收藏+]

问题场景

  1. 后台不提供富文本存储,所以emoji表情入库会报错
  2. 需求要求前端在输入的时候过滤掉表情符号
  3. 全局的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 = {
  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并且全局注入指令

import emoji from ‘./common/utils/emoji‘;
Vue.directive(‘emoji‘, emoji)

使用场景

// 在input框添加v-emoji指令既可
<a-input
        :maxLength="50"
        v-emoji
        autocomplete="off"
        placeholder="请输入名称"
        v-model= "form.label" />

vue自定义全局指令v-emoji限制input输入表情和特殊字符

原文:https://www.cnblogs.com/whkl-m/p/15349232.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!