美文网首页
兼容ios上textarea字符数的问题

兼容ios上textarea字符数的问题

作者: 摩登开发者Oliver | 来源:发表于2022-05-07 10:32 被阅读0次

    在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(),这个你就自己去写

    相关文章

      网友评论

          本文标题:兼容ios上textarea字符数的问题

          本文链接:https://www.haomeiwen.com/subject/fkwturtx.html