用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) } } }
这样,既限制了输入内容的字符长度,又实现了数据处理以后的双向数据绑定。