自動的にフォーカスを取得する要素入力ボックスの実装

最近のプロジェクトでフォームを作成するときに、コメント ボックスまで自動的にスクロールし、コメント ボックスを自動的にフォーカスさせる必要があります。そのためには、入力ボックスのフォーカス状態を手動でトリガーする必要があります。

ただし、要素は autofocus 属性をサポートしていないため、ネイティブ js 効果を通じてのみフォーカス効果を得ることができます。

document.getElementById("入力").focus();

または、vue の ref 属性を使用してフォーカス効果を実現することもできます。

原理は実はとてもシンプルです。Element はすでに focus メソッドを提供していますが、ドキュメントではその呼び出し方法が明記されていません。以下は、el-input タグに ref 属性を追加し、必要な場所でメソッドを直接呼び出す方法です。

<el-input v-model="input" placeholder="コンテンツを入力してください" ref="input"></el-input>

this.$nextTick(() => {
      this.$refs.input.focus()
    })

注: ページにはフォーカス効果を 1 つだけ設定できます。

最後に、vueはカスタム命令もサポートしています

ページが読み込まれると、要素にフォーカスが設定されます (注: モバイル Safari では自動フォーカスは機能しません)。実際、ページを開いてから何もクリックしていない限り、入力ボックスにフォーカスが当たったままになります。次に、命令を使用してこの機能を実装してみましょう。

// グローバルカスタムディレクティブ `v-focus` を登録します
Vue.directive('focus', {
  // バインドされた要素が DOM に挿入されると...
  挿入: 関数 (el) {
    // 要素にフォーカス el.focus()
    //要素UI
    el.children[0].focus()
    // 表示や親要素の変更など、要素が変更された場合は、遅延を追加したり、setTimeout(_ => {
      el.children[0].focus()
    })
  }
})

参考: vue カスタムディレクティブ https://cn.vuejs.org/v2/guide/custom-directive.html

要素入力ボックスのフォーカスを自動的に取得する方法についての記事はこれで終わりです。要素入力ボックスのフォーカスを自動的に取得する方法の詳細については、123WORDPRESS.COM の以前の記事を検索するか、次の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。