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

4 years ago

source link: https://blog.csdn.net/weixin_47679798/article/details/111878537
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.

限制输入框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方法的正则使用。下次单拿出来详讲。
觉得还不错的，给个支持与关注~~~~，将会是我继续更新的动力。