uniapptextareaコンポーネントが最大値を超えています

この問題はプロジェクトで発生します。テキストエリアに最大入力値50が設定されていますが、Androidスマートフォンでは、それを超えても入力を続行できます。

解決策:@inputメソッドを使用してリアルタイムの入力値を取得します。入力値が制限された文字数nより大きい場合は、vモデルにバインドされた値を再割り当てし、現在の最初のn個の値を割り当てます。入力。

追加の知識:@inputイベント自体にパラメーターがあるため、独自のパラメーターも渡す必要がある場合は、@input="bindTextAreaBlur2($event,'我是谁')"このような値を渡すことができます。これにより、2つの入力ボックスに2つのメソッドを記述した場合のコードの冗長性が節約されます。

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

おすすめ

転載: juejin.im/post/6977281427930873892
おすすめ