限制输入框30个字符/字节或15个汉字

就拿限制输入框30个字符15个汉字为例吧，当然灵活使用，方法封装好，你也可以20个字符10个汉字等等根据传参决定。
结合网上思路。整理一波。
js的方法，slice, substring等截取字符串的方法，全部都是以长度截取的，做不到按字节截取。如，input 自带的maxlength也是以长度限制。
但是有时的需求需要我们按照字节限制输入框。如输入框只能输入30个字符，大于30时，则把超出的值替换为空。

一个汉字=2字节=2字符
一个字母、数字=1字节=1字符
首先会用到两个知识点。正则与js方法
正则：

/[\x00-\xff]/

表示匹配单字节的字符，如汉字和…等号等。单字节字符：字母与数字。
charAt()//返回指定位置的字符的下标。

js函数部分：

//1参数：输入的值  2参数：要限制输入的字符个数
export const limitstr = (strval,strnum)=>{
let re = "";
let strleng = strval.length;
//返回字符串的总字节数
let byteleng = strval.replace(/[^\x00-\xff]/g,'**').length;
if(byteleng<=strnum)return strval;
for(var i=0，bytenum=0;i<strleng;i++){
  var byte = strval.charAt(i);
  if(/[\x00-\xff]/.test(byte)){
   bytenum++;//单字节字符累加1
  }else{
   bytenum+=2;//非单字节字符累加2
  }
  if(bytenum<=strnum){re+=byte}else{return re}
 }
}

调用部分：首先引入limitstr函数

<template>
  <div>
    <input type="text" v-model="name" @blur="b">
  </div>
</template>
<script>
export default {
  methods:{
    data(){
     return{name:""}
    }
    b(){
      this.name = this.$limitstr(this.name,30)
    }
  }
}
</script>

结果：

不管输入多少汉字，字母数字，最终的input框内只存入30个字符。则多输入部分替换为空。
至于，replace方法的正则使用。下次单拿出来详讲。
觉得还不错的，给个支持与关注~~~~，将会是我继续更新的动力。

------努力努力再努力。

本文地址：https://blog.csdn.net/weixin_47679798/article/details/111878537