開発中に問題が発生しました。各操作ページが完了した後に、入力テキスト ボックスが自動的にフォーカスされるようにしたいのですが、問題は次のとおりです。どうすればよいですか。読み進めてください。
おそらくほとんどの学生がこれを行うでしょう。テキストボックスのプロパティを変更しようとしましたがfocus、true効果はありません。参考は次のとおりです。
<template>
<view class="content">
<!-- 此处省略... -->
<view class="expand">
<input class="input" type="text" v-model="value" focus="true"/>
</view>
<!-- 此处省略... -->
</view>
</template>
手動で実装してみたり、focusイベントを呼び出してみたり、以前のh5プロジェクトとは違うと思いますが、domを操作する方法がないので、とりあえず横に置いておいて、インターネットで解決策を探すのは適当ではありません
自分で解決するしかないようです。まずは自分の考えを整理して、フォーカスの状態を知りましょう。プロパティを直接focusalways に設定するtrueのが間違っているようであれば、状態更新の設定をしてみてください。以下を参照してください。
<template>
<view class="content">
<!-- 此处省略... -->
<view class="expand">
<input class="input" type="text" v-model="value" :focus="isInputFocus" @blur="onblur"/>
</view>
<!-- 此处省略... -->
</view>
</template>
見つかりましたか?入力ボックスコンポーネントで、属性
focus変数をisInputFocus更新可能に設定し、属性メソッドを追加します。onblur()
これは実行する必要があります。入力ボックスがフォーカスを失ったときは、状態を更新するメソッドを呼び出す必要があります。次のコードを参照してください。
export default {
data() {
return {
//...
value:'',
isInputFocus:true,
};
},
methods:{
onblur(){
this.isInputFocus=false;
},
//...
}
}
操作が完了したら、手動で入力ボックスのフォーカスを設定し、以下のようにコードを実行すると、こんな使い方ができると思いませんか！
this.$nextTick(()=>{
this.value='';
this.isInputFocus=true;
})
