当前位置: 首页 > Web前端 > vue.js

JS限制输入框输入字符长度,中文算2个字符,英文算1个字符,总字符长度不超过N

时间:2023-03-31 18:44:42 vue.js

JS限制输入框输入字符长度,中文算2个字符,英文算1个字符,总字符长度不超过N前端时间公司的项目需求包括这个需求。当时改了好几次,一直有bug。现在它被记录为一个音符。如果中英文字符都算作一个字符数,只需要设置input标签的maxlength属性即可。但是单独统计时,总长度是不确定的,需要动态计算。实现思路是给输入框添加事件,可以是keyup或者input事件。keydown和keypress事件不能监听中文输入。计算输入字符串的“字符长度”。中文算1个字,英文算1个字。当字符串“字符数长度”达到N或N-1时,字符串字符数(位数)n截取一个长度为n的字符串JavaScript代码示例代码:limitLength(e){constinput=e.target;constsplit=input.value.split('');//计算输入的长度constmap=split.map((s,i)=>(input.value.charCodeAt(i)>=0&&input.value.charCodeAt(i)<=128)?1:2);//在这里设置你想要限制的长度constmaxLength=32;让n=0;constcharLength=map.length>0&&map.reduce((accumulator,currentValue,index)=>{if(accumulator===maxLength||accumulator===maxLength-1){n=index;}return累加器+currentValue;});如果(charLength>maxLength){input.value=split.slice(0,n).join('');}}欢迎转载,转载请注明出处:https://blog.kaguramea.me/archives/js-restrict-input-length