vue实时监控输入框输入字数

前端时间做项目中实际遇到的问题,测试提出了在ios上出现的bug,分享给大家!

限制最大长度,500

<textarea  placeholder="内容" v-model="userobjet" maxlength="500" @input="descInput">{{remnant}}/500</textarea>

export default {

data() {

return {

userobjet: '' // textarea内容

},

// 监控输入

descInput() {

let txtVal = this.userobjet.length;

this.remnant = 500 - txtVal;

}

}

到此完成,自测没问题,自信提测,but突然一个bug砸过来。。。。

ios输入文字加表情然后疯狂复制粘贴,数字已经减的变成0了,但是还可以继续复制,数字就变成了负数,安卓是好的,然后排查了下可能是ios输入的表情的长度没算到里面

解决方案添加监控,长度大于设置的数值就设置为0,并截取自己想要的长度,就哦了,然后测试ios也没问题了

watch:{

userobjet(curVal, oldVal){

if (curVal.length >= 500) {

this.remnant = 0

this.userobjet = curVal.substring(0,500)

}

}

}

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • 我有点惶恐,在偶然听见这句“她这人有时候感觉不太真”的评价以后。 我不太清楚房间里有几个人,又...
    捉住一只灰灰阅读 3,304评论 0 0
  • 快十五了老爹一早打来电话问及十五怎么过,我说了孩子补课可能不回村了,也不能顺路去看他们了。老爹说孩子学习重要,并反...
    方叶子阅读 4,857评论 0 2
  • 你要问我国庆感受吗?睡觉吃饭看电影。 平常普通,我就喜欢这样的普通。 没有了她的电话,没有了她的聊天,生活并没有多...
    unravellll阅读 1,562评论 0 1
  • 作业:记录一段真实生活中的人物的语言,或者是两三个人物的对话。(可以先录音下来然后逐字打出来) 大家都在机场行李盘...
    三片阿司匹林阅读 1,319评论 6 0
  • 上海的雨天,思念家乡与亲人的自己,烦闷的心情,恍恍惚惚的自己
    诺诺阳阅读 1,495评论 0 0

友情链接更多精彩内容