uniapp textarea组件超出最大值

631 阅读1分钟

项目中遇到这样的问题:给textarea设置了最大输入值50,但是在安卓手机上仍然可以继续输入,以至超出。

解决思路:通过@input方法获取实时的输入值,当输入值大于限制的字数n时,给v-model绑定的值重新赋值,赋当前输入的前n个的值。

附加知识:由于@input事件本身有参数,所以当我们还需要传自己的参数时,可以这样传值@input="bindTextAreaBlur2($event,'我是谁')",这样省去了两个输入框要写两个方法致使的代码冗余。

<view class="uni-textarea">
	<textarea v-model="query.aa" :key="query.aa" placeholder-style="color:#F76260" placeholder="占位符字体是红色的" @input="bindTextAreaBlur($event,'aa')" maxlength="20"/>
	<view>{{query.aa.length}}/20</view>
</view>
<view class="uni-textarea">
	<textarea v-model="query.bb" :key="query.bb" placeholder-style="color:#F76260" placeholder="占位符字体是红色的" @input="bindTextAreaBlur($event,'bb')" maxlength="20"/>
        <view>{{query.bb.length}}/20</view>
</view>
data() {
    return {
        query: {
            aa: "",
            bb: ""
        }
    }
},
methods: {
    bindTextAreaBlur: function (e,c) {
        console.log(e.detail.value,c)
        let maxValue = e.detail.value
        if(maxValue.length>=5){
            this.$nextTick(()=>{
             this.query[c]=e.detail.value.substring(0,5)
            })
        }
    },
}