美文网首页
vue实时监控输入框输入字数

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

作者: 小虾米前端 | 来源:发表于2019-08-26 16:21 被阅读0次

    前端时间做项目中实际遇到的问题,测试提出了在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 = 0this.userobjet = curVal.substring(0,500)}}}

    作者:ytt1224
    链接:https://www.jianshu.com/p/a95f17d900d7
    来源:简书
    简书著作权归作者所有,任何形式的转载都请联系作者获得授权并注明出处。

    相关文章

      网友评论

          本文标题:vue实时监控输入框输入字数

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