zoukankan      html  css  js  c++  java
  • vue中实时监听input中字符长度并限制,Element-ui el-input

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

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

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

    <input style="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)
            }
          }
        }

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

  • 相关阅读:
    day13_迭代器,生成器
    作业礼包
    day12_装饰器进阶
    装饰器作业
    day11_装饰器
    函数作业
    day10-函数进阶
    数据类型-习题解答
    day09_函数
    PHP 完美分页
  • 原文地址:https://www.cnblogs.com/yuanxinru321/p/10868328.html
Copyright © 2011-2022 走看看