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

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

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

ただし、要素は 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 をよろしくお願いいたします。

以下もご興味があるかもしれません:
  • Vue フォーム入力ボックスがフォーカスおよびぼかしイベントをサポートしていない問題の解決策
  • VueはInput入力ボックスのファジークエリメソッドを実装します
  • Vueの入力ボックスはクリックしてもフォーカスされません

<<:  ドメイン名、ポート、異なるIPに基づくnginx仮想ホスト設定の実装

>>:  フロントエンドの HTML 知識ポイントのまとめ (推奨)

推薦する

MySQL ストレージエンジンの簡単な紹介

1. MySQL アーキテクチャストレージ エンジンを紹介する前に、まずは MySQL アーキテクチ...

サーバー間のファイル バックアップ ソリューション、サーバー ファイルを別のサーバーに自動的にバックアップする方法は?

多くの組織ではファイル サーバーをバックアップする必要があり、あるサーバーから別のファイル サーバー...

シンプルなナビゲーションバー機能を実現するHTML+CSS

さっそく、コードを見てみましょう(初心者:特に言うことはありません) <!DOCTYPE ht...

insert と select を組み合わせて、「データベース内のフィールドの最大値 + 1 を挿入する」メソッドを実装する

この記事はmysqlデータベースです質問 1 表 1 のデータを表 2 にインポートします。表 1 ...

Mysql5.7 で JSON 操作関数を使用する手順

序文JSON は、言語に依存しないテキスト形式を使用する軽量のデータ交換形式で、XML に似ています...

ユーザー エクスペリエンス デザイナーとは誰ですか?

怖いですね! 写真の翻訳: (内側から外側へ)最初のレイヤー:ユーザーエクスペリエンス第2層:コンテ...

jsとcssのブロッキング問題の詳細な分析

目次DOMContentLoadedとロードjs ブロッキングとは何ですか? CSS ブロッキングと...

MySQLはテーブル内のフィールドを別のテーブル内のフィールドの値と等しくなるように更新します

以下のように表示されます。 table1 を z として更新し、table2 を zb として結合し...

既存のMySQLデータベースの文字セットを統一する方法

序文データベースでは、一部のデータ テーブルとデータは latin1 であり、一部のデータ テーブル...

Truncate Table の使用法の説明

テーブルを切り捨てる個々の行の削除をログに記録せずに、テーブル内のすべての行を削除します。文法 テー...

VMware インストール後に仮想ネットワーク カードが表示されない問題について

1 問題の説明: 1.1 Windows 10 に VMware を初めてインストールする場合、また...

HTML と CSS を書くための 6 つの最も効果的な方法

この記事では、効率を向上させ、時間を節約することを願って、最も効果的な 6 つの方法を紹介します。 ...

CocosCreatorで複数のタイマーを使用する方法の詳細な説明

1.タイムアウトを設定する3 秒後に abc を印刷します。一度だけ実行します。 setTimeou...

ElementUI コンポーネント el-dropdown (落とし穴)

選択して変更: クリックすると現在の値が表示され、ページ UI が表示され、CSS スタイルが変更さ...

HTML と CSS の基礎 (必読)

(1) HTML: ハイパーテキストマークアップ言語。主に「ヘッダー」と「ボディ」の2つの部分で構...