zoukankan      html  css  js  c++  java
  • vue监听el-input输入禁止emoji表情

    测试提出el-input输入emoji表情,提交时会报错,因为后台未做判断,现要求前端这边做处理。

    自定义指令:代码如下

    import emojiRegex from 'emoji-regex';  //npm install emoji-regex
    Vue.directive('clearEmoij', {
      bind(el, binding, vnode, oldVnode) {
        const regex = emojiRegex();
        const obj = el.querySelectorAll('.el-input__inner,.el-textarea__inner')[0];
        let zclearNoNum = function (e) {
          if(e.target.composing) return;
          let match = regex.exec(obj.value); //也可以直接用正则表达式判断
          if(match) {
            /*for (let i=0;i<match.length;i++) {
              obj.value = obj.value.replace(match[i],"");
            }*/
            obj.value = obj.value.replace(/(ud83c[udc00-udfff])|(ud83d[udc00-udfff])|(ud83e[udc00-udfff])|[u2100-u32ff]|[u0030-u007f][u20d0-u20ff]|[u0080-u00ff]/g, "");
            zclearNoNum(e);
          }
          // 触发v-model的更新
          obj.dispatchEvent(new Event('input'));
        }
        let zblur = function (e) {
          zclearNoNum(e);
          setTimeout(()=>{
            let match = regex.exec(obj.value);
            if(match) {
              obj.value = obj.value.replace(/(ud83c[udc00-udfff])|(ud83d[udc00-udfff])|(ud83e[udc00-udfff])|[u2100-u32ff]|[u0030-u007f][u20d0-u20ff]|[u0080-u00ff]/g, "");
              zclearNoNum(e);
            }
            // 触发v-model的更新
            obj.dispatchEvent(new Event('change'));
          }, 50)
        }
        obj.onkeyup = zclearNoNum;
        obj.onblur = zblur;
    
        function onCompositionStart (e) {
          e.target.composing = true
        }
        function onCompositionEnd (e) {
          e.target.composing = false
          obj.dispatchEvent(new Event('input'));
        }
        // https://segmentfault.com/a/1190000009246058
        obj.addEventListener('compositionstart', onCompositionStart)
        obj.addEventListener('compositionend', onCompositionEnd)
      },
      update(el, binding, vnode, oldVnode) {}
    })

    //vue html代码 在el-input中添加自定义指令v-clear-emoji
    <el-form-item label="工号" prop="username" >
    <el-input v-model="addForm.username" v-clear-emoij auto-complete="off" maxlength='18' placeholder="请输入工号" clearable @keyup.enter.native="searchData" ref="zusername"></el-input>
    </el-form-item>
     

    输入emoji表情或者复制emoji表情时,会自动刷新清除emoji表情。

  • 相关阅读:
    ABP 数据库 -- ABP&EF中的多表、关联查询
    C# List集合基础操作
    C# ABP 允许跨域请求
    异或运算、与运算、或运算 运用在 多项选择题
    C# ABP 配置连接数据库&创建表
    C# ABP WebApi与Swagger UI的集成
    C# 深入了解泛型
    8、SpringBoot+Mybatis整合------参数取值方式
    7、SpringBoot+Mybatis整合------PageHelper简单分页
    6、SpringBoot+Mybatis整合------参数传递
  • 原文地址:https://www.cnblogs.com/ming1025/p/14042300.html
Copyright © 2011-2022 走看看