vue中实时监听input中字符长度并限制，Element-uiel-input ⽤vue写的后台管理系统，input需要限制输⼊内容的字符长度
（如果需要限制字符串的长度，只需要使⽤element-ui中的input的maxlength和minlength属性即可，原⽣的input同样的做法）
如果是限制字符长度，el-input覆盖了原⽣的⽅法，需要将el-input元素更换成原⽣input，如果想保持el-input 的样式，只需要给input添加el-input__inner 的class
<input 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)
}
}
}
这样，既限制了输⼊内容的字符长度，⼜实现了数据处理以后的双向数据绑定。判断字符串长度

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。