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


    问题:

    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'

    1. const findEle = (parent, type) => {
    2. return parent.tagName.toLowerCase() === type ? parent : parent.querySelector(type)
    3. }
    4. const trigger = (el, type) => { // 给元素绑定事件
    5. const e = document.createEvent('HTMLEvents')
    6. e.initEvent(type, true, true)
    7. el.dispatchEvent(e)
    8. }
    9. const emoji = {
    10. // el:指令所绑定的元素,可以用来直接操作 DOM。
    11. // vnode:Vue 编译生成的虚拟节点
    12. bind: function (el, binding, vnode) { // 指令第一次绑定到元素时调用
    13. // 判断是否是emoji图标
    14. const isEmoji = char => {
    15. // 表情都是2个字符
    16. return char.length > 1;
    17. }
    18. const emoji2empty = str => { // emoji图标都替换成空字符串‘’
    19. return Array.from(str)
    20. .filter(c => !isEmoji(c)).join('')
    21. }
    22. let $inp = findEle(el, 'input') || findEle(el, 'textarea') // 判断绑定元素是否是input输入框或者富文本输入框
    23. el.$inp = $inp
    24. $inp.handle = function () {
    25. let val = $inp.value
    26. $inp.value = emoji2empty(val) // 监听输入框的emoji图标转换成空
    27. trigger($inp, 'input')
    28. }
    29. $inp.addEventListener('keyup', $inp.handle) // el添加键盘监听事件keyup
    30. $inp.addEventListener('blur', $inp.handle) // el添加键盘失焦事件blur
    31. },
    32. unbind: function (el) { // 只调用一次,指令与元素解绑时调用。
    33. el.$inp.removeEventListener('keyup', el.$inp.handle)
    34. el.$inp.removeEventListener('blur', el.$inp.handle)
    35. },
    36. }
    37. export default emoji

    入口文件引入emoji并且全局注入指令
    Vue.directive( id, [definition] )
    id: 为指令唯一id
    {Function | Object} [definition] 注册的指令
    一个指令定义对象可以几个钩子函数 (均为可选):这里使用到bind和unbind
    bind:只调用一次,指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置。
    unbind:只调用一次,指令与元素解绑时调用。

    基础用法

    import emoji from '@/utils/emoji'
  • 相关阅读:
    技巧:win10的另一种美化字体的方式,使用noMeiryoUI
    【质量】代码质量评价标准
    C++语法基础(4)——循环结构程序设计
    【Ceph Cluster】完全删除Ceph集群
    锐捷校园网自助服务系统 login_judge.jsf 任意文件读取漏洞复现(XVE-2024-2116)
    C#反射
    C/C++结构体使用总结
    堡垒机的自动化运维,快速安全提升运维效率
    windows 2012服务器配置nginx后无法访问域名的问题
    龙芯2K0500核心板可以在智能水表产品上的解决方案-迅为电子
  • 原文地址:https://blog.csdn.net/qq_40453972/article/details/134016683