Le composant uniapp textarea dépasse la valeur maximale

Ce problème est rencontré dans le projet : la valeur d'entrée maximale de 50 est définie pour la zone de texte, mais l'entrée peut toujours être poursuivie sur le téléphone Android, voire la dépasser.

Solution : obtenez la valeur d'entrée en temps réel via la méthode @input. Lorsque la valeur d'entrée est supérieure au nombre limité de caractères n, réaffectez la valeur liée au modèle v et affectez les n premières valeurs du courant saisir.

Connaissances supplémentaires : étant donné que l'événement @input lui-même a des paramètres, lorsque nous devons également transmettre nos propres paramètres, nous pouvons transmettre la valeur @input="bindTextAreaBlur2($event,'我是谁')"comme ceci, ce qui évite la redondance de code causée par l'écriture de deux méthodes pour deux zones de saisie.

<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)
            })
        }
    },
}
复制代码