vue自定义指令：v-no-special-chars禁止输入特殊字符

效果：

指令封装

// 禁止输入框输入特殊字符，特殊字符可以自定义
Vue.directive('no-special-chars', {
  bind(el, binding, vnode) {
    el = el.nodeName === 'INPUT' ? el : el.children[0]
    let lock = false // 标记是否需要锁定输入框
    let isHandling = false // 标记是否正在处理
    let lastValue = null
    const invalidChars = binding.value
    const handler = () => {
      if (lock) return // 如果当前为锁定状态，则不进行处理
      if (isHandling) return // 如果已经在处理中，则不进行处理
      if (el.value === lastValue) return // 输入内容没有变化，则不进行处理
      isHandling = true // 设置标记为处理中
      const filteredValue = el.value
        .split('')
        .filter(n => !invalidChars.includes(n))
        .join('')
      el.value = filteredValue
      lastValue = el.value
      // el.dispatchEvent(new Event('input')) // 通知v-model更新
      Promise.resolve().then(() => {
        el.dispatchEvent(new Event('input'))
      })
      isHandling = false // 处理完毕后设置标记为非处理状态
    }
    el.addEventListener('input', handler)
    el.addEventListener('compositionstart', () => {
      lock = true
    })
    el.addEventListener('compositionend', () => {
      lock = false
      el.dispatchEvent(new Event('input'))
    })
    vnode.context.$once('hook:destroyed', () => {
      el.removeEventListener('input', handler)
    })
  }
})

使用：

<el-input  v-model="value" v-no-special-chars="invalidChars" />


data:

  value: '',
  invalidChars: ['%', '^', '&']

如果需要根据状态判断是否需要添加指令，使用v-show

    <el-input v-show="isSpecial" v-model="value" v-no-special-chars="invalidChars" />
    <el-input v-show="!isSpecial" v-model="value" />
    
    
      computed: {
        // 对公账户和个人银行卡需要禁止输入特殊字符
        isSpecial() {
          return [1, 2].includes(this.select)
        }
      }

如果你觉得这篇文章对你有用，可以看看作者封装的库xtt-utils，里面封装了非常实用的js方法。如果你也是vue开发者，那更好了，除了常用的api，还有大量的基于element-ui组件库二次封装的使用方法和自定义指令等，帮你提升开发效率。不定期更新，欢迎交流~