Vue中禁止輸入表情符号指令

參考位址：vue el-input中禁止輸入表情符号_笑到世界都狼狽的部落格-CSDN部落格_輸入框禁止輸入表情

你知道compositionstart和compositionend嗎 - 掘金

const findEle = (parent, type) => { 
  return parent.tagName.toLowerCase() === type ? parent : parent.querySelector(type)
}

const emoji = {
  bind(el, binding, vnode, oldVnode) {
    const regex = /(\ud83c[\udc00-\udfff])|(\ud83d[\udc00-\udfff])|(\ud83e[\udc00-\udfff])|[\u2100-\u32ff]|[\u0030-\u007f][\u20d0-\u20ff]|[\u0080-\u00ff]/g;
    const obj = findEle(el, 'input') || findEle(el, 'textarea');
    const zclearNoNum = function(e) {
      if (e.target.composing) return;
      const 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(regex, '');
        zclearNoNum(e);
      }
      // 觸發v-model的更新
      obj.dispatchEvent(new Event('input'));
    }
    const zblur = function(e) {
      zclearNoNum(e);
      setTimeout(() => {
        const match = regex.exec(obj.value);
        if (match) {
          obj.value = obj.value.replace(regex, '');
          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) {
      // console.log('按回車将字輸入', e.target.value)
      e.target.composing = false
      obj.dispatchEvent(new Event('change'));
      setTimeout(() => {
        if (obj.value) {
          obj.value = obj.value.replace(regex, '');
          zclearNoNum(e);
        }
        // 觸發v-model的更新
        obj.dispatchEvent(new Event('change'));
      }, 50)
    }
    obj.addEventListener('compositionstart', onCompositionStart)
    obj.addEventListener('compositionend', onCompositionEnd)
  },
  update(el, binding, vnode, oldVnode) {}
}
export default emoji
           

在main.js中全局注冊指令

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" />