就拿限制輸入框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://www.uj5u.com/qianduan/242898.html
標籤：其他