input输入框按照字符数限制输入

实现效果：按照字符数限制用户输入长度，汉字为两个字符，数字和字母为一个字符，超出字符长度限制时，自动去掉多余部分来限制用户输入。

第一种实现方式，自定义指令（update存在不及时调用的情况，放弃）

• vue文件

<template>
  <div>
    <textarea v-limitTextLen="titleMaxLength" v-model="textareaValue"/>
  </div>
</template>
<script>
export default {
  name: 'Home',
  data() {
    return {
      textareaValue: '',
      titleMaxLength: 10
    }
  }
}
</script>

• js文件
  定义全局自定义指令
  src目录下新建directive文件夹，directive文件夹下新建index.js和limitTextLen.js

index.js内容如下：

import vLimitTextLen from "./limitTextLen";
export default (Vue) => {
    Vue.directive('limitTextLen', vLimitTextLen)
}

limitTextLen.js内容如下：

function getStringLengthForChinese(val) {
    let str = val.toString(val)
    let result = 0
    for (let i=0;i<str.length;i++) {
        let temp = str.charCodeAt(i)
        if ((temp > 0x0001 && temp <= 0x007e) || (temp >= 0xff60 && temp <= 0xff9f)) {
            result += 1
        } else {
            result += 2
        }
    }
    return result
}
export default {
    update: (el,binding) => {
        // 超出长度限制
        if (getStringLengthForChinese(el.value) > binding.value) {
            let arr = el.value.split('')
            // 输入字符转成数组，依次推出最后一位元素
            for (let i=arr.length-1;i>0;i--) {
                arr = arr.slice(0,i)
                el.value = arr.join('')
                // 每推出一个，再次进行长度判断
                if (getStringLengthForChinese(el.value) <= binding.value) {
                    break
                }
            }
        }
    }
}

main.js中添加自定义指令

import Vue from 'vue'
import customDirective from './directive/index'
Vue.use(customDirective)

new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')

第二种实现方式，watch监听（正常）

• vue文件

<template>
  <div>
    <textarea v-model="textareaValue"/>
  </div>
</template>

<script>
export default {
  name: 'Home',
  data() {
    return {
      textareaValue: '',
      titleMaxLength: 10
    }
  },
  watch: {
    textareaValue: function() {
      function getStringLengthForChinese(val) {
          let str = val.toString(val)
          let result = 0
          for (let i=0;i<str.length;i++) {
              let temp = str.charCodeAt(i)
              if ((temp > 0x0001 && temp <= 0x007e) || (temp >= 0xff60 && temp <= 0xff9f)) {
                result += 1
              } else {
                result += 2
              }
          }
          return result
      }
      let str = this.textareaValue
      if (getStringLengthForChinese(str) > this.titleMaxLength) {
          let arr = str.split('')
          // 输入字符转成数组，依次推出最后一位元素
          for (let i=arr.length-1;i>0;i--) {
              arr = arr.slice(0,i)
              str = arr.join('')
              // 每推出一个，再次进行长度判断
              if (getStringLengthForChinese(str) <= this.titleMaxLength) {
                this.textareaValue = str
                break
              }
          }
      }
    }
  }
}
</script>