在ios上textarea如果使用粘贴会出现换行计算两个字符数,就是/n计算的是两个字符,导致maxlength计算不一致, 这就让电脑上和手机上显示的数量不一致:
image.png
使用复制粘贴后(复制刚刚的包含一个换行的输入):
image.png
image.png
image.png
为什么显示49是因为粘贴会自动加一个空格所以是49,实际是48个字符无法输入, 电脑上粘贴不会出现maxlength计算错误问题,这就是ios有点坑的地方自己设计的maxlength计算规则却不一致,这不扯吗...
image.png
image.png
无奈只能自己写方法去兼容下,这里说清楚了原因,应该都能写出兼容方法了,我就粘贴个我自己写的:
dealCurrentMaxLen(str, maxLen) {//Handle incorrect character count due to newline on ios
if (Unit.isIos() && isMobile) {
let reg = new RegExp(/\n/g);
let lineNum = str.match(reg);
return lineNum ? lineNum.length + maxLen : maxLen
} else {
return maxLen
}
},
//html
<textarea :maxlength="dealCurrentMaxLen(headline, 50)" v-model="headline"></textarea>
<span>{{headline.length}}/50</span>
这里主要是将maxlength换成变量绑定 :
:maxlength="dealCurrentMaxLen(headline, 50)"
然后这个是自己写的识别ios的代码Unit.isIos(),这个你就自己去写
