uview2.0 u-textarea设置maxlength在手机上粘贴字数超过限制时统计字数会超过限制字数

问题:使用uniapp开发小程序时候,用了uview2.0组件库,有个需求就是文本输入框要限制100个文字,看了下uview2.0文档,发现u-textarea组件内置了这个功能,只需要在组件上添加count 和 maxlength属性即可,看起来好像很简单,我添加完后,在微信开发者工具上自测确实没有问题,但在手机上测试就发现了bug,当粘贴字数超过限制时统计字数会超过限制字数,虽然文本确实被限制在了100以内,但那个统计当前字数的数字会超过限制,即会出现 102/100的现象,如下图所示:
在这里插入图片描述
这个问题一出现我立马就觉得是uview的bug,看了下github,确实有网友给uview提了这个bug,但看这样子官方好像还是没有解决,看来只能靠自己解决了呀。考虑到自己再去写个textarea组件的话觉得麻烦,我又是一个比较懒的人。。。
于是我就去翻了下这个组件的源码,发现它当前字数的统计是直接使用了输入的文字的length属性:
在这里插入图片描述
那么问题就是出现在这里啦,不能说文本一输入就使用它的length,得先做判断啊。翻阅官方文档,发现有个formatter方法,这个方法是用于处理或者过滤输入框内容的方法,那么我们就可以在这个方法上做文章了,只要文本超过了100,那么就截取100个字符就好了,代码如下:

//html
<u-textarea count maxlength="100" v-model="remark" border="bottom" autoHeight placeholder="请输入文字内容" ref="textarea"></u-textarea>
//js
onReady() {
// 如果需要兼容微信小程序的话,需要用此写法
		this.$refs.textarea.setFormatter((value) => {
			if (value.length >= 100) {
			  return value.substr(0, 100)
			}else {
			  return value
			}
		})
	}

这样一改,发现在手机上不管怎么输入、粘贴都是可以的,字数统计也是正常的。
注:如果是微信小程序的话,必须使用u-textarea标签,不能使用u–textarea,否则会报错;如果不是微信小程序的话,formatter有其他写法,具体就去翻阅文档,这里就不再赘述了。

  • 1
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值