vue自定义指令添加 input框输入全角字符时触发该指令转化为半角字符

最新推荐文章于 2025-04-22 15:46:36 发布

原创最新推荐文章于 2025-04-22 15:46:36 发布 · 2.3k 阅读

6 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #vue.js #前端

常用专栏收录该内容

12 篇文章

订阅专栏

v-angle // input框输入全角字符时触发该指令转化为半角字符

Vue.directive('angle', {
  inserted: function (el, binding, vnode) {
    el.children[0].value = binding.value
    let angleValue = el.children[0]
    // console.log(el)
    // console.log(binding)
    // console.log(vnode)
    // // vnode.data.model.callback(angleValue.value)
    // console.log(angleValue.value)
    el.addEventListener('keyup', function (e) {
      e = e || window.event
      // console.log(e)
      // // console.log(e.key)
      let str = angleValue.value
      let tmp = ''
      str = str.replace(/：/g, ':')
      str = str.replace(/。/g, '.')
      str = str.replace(/“/g, '"')
      str = str.replace(/”/g, '"')
      str = str.replace(/【/g, '[')
      str = str.replace(/】/g, ']')
      str = str.replace(/《/g, '<')
      str = str.replace(/》/g, '>')
      str = str.replace(/，/g, ',')
      str = str.replace(/？/g, '?')
      str = str.replace(/、/g, ',')
      str = str.replace(/；/g, ';')
      str = str.replace(/（/g, '(')
      str = str.replace(/）/g, ')')
      str = str.replace(/‘/g, "'")
      str = str.replace(/’/g, "'")
      str = str.replace(/『/g, '[')
      str = str.replace(/』/g, ']')
      str = str.replace(/「/g, '[')
      str = str.replace(/」/g, ']')
      str = str.replace(/﹃/g, '[')
      str = str.replace(/﹄/g, ']')
      str = str.replace(/〔/g, '{')
      str = str.replace(/〕/g, '}')
      str = str.replace(/—/g, '-')
      str = str.replace(/·/g, '.')
      /* 正则转换全角为半角 */
      for (var i = 0; i < str.length; i++) {
        if (str.charCodeAt(i) === 12288) {
          tmp += String.fromCharCode(str.charCodeAt(i) - 12256)
          continue
        }
        if (str.charCodeAt(i) > 65280 && str.charCodeAt(i) < 65375) {
          tmp += String.fromCharCode(str.charCodeAt(i) - 65248)
        } else {
          tmp += String.fromCharCode(str.charCodeAt(i))
        }
      }
      // console.log(angleValue.value)
      // console.log(binding)
      // console.log(vnode)
      vnode.data.model.callback(tmp)
    })
  }
})

使用

<el-input
    v-angle="value"
     v-model="value"/>