vue中实时监听input中字符长度并限制,Element-ui el-input

时间:2022-11-08 18:43:53

用vue写的后台管理系统,input需要限制输入内容的字符长度

 

(如果需要限制字符串的长度,只需要使用element-ui中的input的maxlength和minlength属性即可,原生的input同样的做法)

 

如果是限制字符长度,el-input覆盖了原生的方法,需要将el-input元素更换成原生input,如果想保持el-input 的样式,只需要给input添加 el-input__inner 的class

 

<input style="width:500px;" class="el-input__inner" type="text" v-model="ticketInf.ticketName" @input="widthCheck($event.target, 100)">

 

现在我们只需要写widthCheck这个方法即可,因为一个汉字是两个字符,字母和符号为1个字符,所以我们判断为汉字的长度*2变为两个字符,其余不变。

 

如果长度大于了我们定义的100,就可以用substr的方法,去掉限制长度后的字符

 

// 限制输入框输入的字符数
    widthCheck (str, len) {
      var temp = 0
      for (var i = 0; i < str.value.length; i++) {
        if (/[\u4e00-\u9fa5]/.test(str.value[i])) {
          temp += 2
        } else {
          temp++
        }
        if (temp > len) {
          str.value = str.value.substr(0, i)
        }
      }
    }

这样,既限制了输入内容的字符长度,又实现了数据处理以后的双向数据绑定。

vue中实时监听input中字符长度并限制,Element-ui el-input