Vueのキーボードイベントの詳細な説明

Vueのキーボードイベントの詳細な説明

js では、キーのコードを取得する場合、通常は (keydown/keyup) を介してイベントをバインドし、デフォルトのパラメータ イベントの keyCode 属性を介してコードを取得する必要があります。固定キーを押してイベントをトリガーしたい場合、イベント内で一定の判断を行う必要があり、非常に面倒になります。

 var 入力 = document.querySelector('入力')
    input.onkeyup = 関数 (e) {
        (e.keyCode == 13)の場合
            console.log('私はEnterキーです')
    }

Vue では、よく使用されるボタンのいくつかにエイリアスが提供されており、イベント内で手動で判断することなく、イベント後に対応するエイリアスを追加するだけで済みます。

共通キーエイリアス

Vue には、よく使用されるボタンに次のようなエイリアスがバインドされています。

  • 上矢印: 上
  • 下矢印: 下
  • 左矢印: 左
  • 右矢印: 右
  • スペース: スペース
  • 改行: タブ
  • 終了: esc
  • 入力: 入力
  • 削除/バックスペース:削除

エイリアスを使用して、キーボード イベント (keydown、keyup) を制限できます。バインドされたイベントは、押されたキーがエイリアスと一致する場合にのみ実行されます。

 <input v-on:keyup.enter="ヒントを表示" type="text">
showtipメソッドはEnterキーが押されたときにのみ実行されます

さらに、タブ キーは keydown での使用にのみ適しています。ブラウザーでは、タブ自体がフォーカスの切り替えイベントにバインドされているため、タブ キーを押して放すと、デフォルトのイベントがトリガーされ、keyup にバインドされたイベントは無視されます。 keydown を使用するとこの状況を回避でき、タブが押された瞬間にバインドされたイベントが実行されます。

エイリアスが指定されていないキー

さらに、vue にはボタンのエイリアスはありませんが、vue ではそれを使用する方法も提供されています。 Vue では、エイリアスを提供しないボタンについては、ボタンの元のキー値を使用してバインドできることが規定されています。いわゆるキー値とは、event.key で取得した値のことです。のように

var 入力 = document.querySelector('入力')
    input.onkeyup = 関数 (e) {
       コンソールログ(e.key)
       }

上記のコードは、任意のキーを押すと、対応するキーの値をコンソールに出力します。大文字と小文字の切り替えキー、Qキー、Wキーを押すと、次の値が得られます。

キーの値をキーの別名として使用できます。キーの値が単一の文字または単語の場合は、キーの値を直接使用できることに注意してください。ただし、大文字と小文字の切り替えキーのように複数の単語で構成されている場合は、2つの単語の組み合わせになります。このとき、キーの値を変更し、ハイフンの命名規則を使用してCapsLock-->caps-lockに変更する必要があります。

 <input v-on:keyup.Q="ヒントを表示" type="text">
//showtip メソッドは q キーが押されたときにのみ実行されます <input v-on:keyup.caps-lock="showtips" type="text">
// showtips メソッドは CapsLock キーが押されたときにのみ実行されます

システム修飾キー

いわゆるシステム修飾キーは、Ctrl、Alt、Shift などです。これらのキーの使用は少し複雑で、主に次の2つの状況に分けられます。

1. トリガー イベントがキーアップの場合、修飾キーを押しながら他のキーを押してから、他のキーを放してイベントをトリガーする必要があります。

 <input v-on:keyup.Alt="ヒントを表示" type="text">
// Alt キーを押してから任意のキーを押して、任意のキーを離すと showtips メソッドが実行されます // 上記の手順は面倒すぎるので、次のように記述します <input v-on:keyup.Alt.y="showtips" type="text">
// Alt + y を押すと、Alt、y、y の順に押さなくてもイベントがトリガーされます。

トリガー イベントが keydown の場合、修飾キーを直接押します。

 <input v-on:keydown.Alt="ヒントを表示" type="text">
// showtips メソッドは、Alt キーが押されたときにのみ実行されます

カスタムキーエイリアス

Vueはキーエイリアスをカスタマイズする方法を提供しており、これは(Vue.config.keyCodes.custom key name = key code)で定義できます。

 <input v-on:keydown.en="ヒントを表示" type="text">
// showtips メソッドは Enter キーが押されたときにのみ実行されます Vue.config.keyCodes.en=13
//13はEnterキーのキーコードなので、そのエイリアスをenとして定義します。

要約する

この記事はこれで終わりです。皆さんのお役に立てれば幸いです。また、123WORDPRESS.COM のその他のコンテンツにも注目していただければ幸いです。

以下もご興味があるかもしれません:
  • Vue は入力をトリガーしてファイルクリックイベント操作を選択します
  • Vue 学習ノート: ネイティブ イベントをコンポーネントにバインドする例
  • Vueイベント処理操作例の詳細な説明
  • VUE 入門 イベント処理の学習
  • Vue イベントの基本的な操作をご存知ですか?

<<:  Linux システムの .bash_profile ファイルの詳細な説明

>>:  HTMLコードに基づく画像断片化読み込み機能の実装

推薦する

Docker で ElasticSearch をデプロイする方法

1. ElasticSearch とは何ですか? Elasticsearch も Java で開発さ...

JavaScript は詳細なコードで星座クエリ機能を実装します

目次1. タイトル2. コード3. 結果IV. 結論1. タイトルテキスト ボックスに誕生日の値を入...

要素テーブルの行と列のドラッグを実装する例

要素 ui テーブルにはドラッグ アンド ドロップによる並べ替え機能が組み込まれておらず、サードパー...

Docker の MySQL コンテナのタイムゾーン問題の修正

序文Ahhang が Springboot プロジェクトを開発していたとき、フロントエンドから検証コ...

JS ベースのページフローティングボックスを実装するためのサンプルコード

スクロール バーを下に引くと、主にposition:fixed;スタイルにより、フローティング ボッ...

IDEA を使用して Tomcat を設定し、JSP ファイルを作成する方法

idea を使用して JSP ファイルを書き込む前に、jdk 環境 (ここでは説明しません) と対応...

このような大画面のデジタルスクロール効果が必要になる場合があります

大画面のデジタル スクロール効果は、最近の作業における大画面 UI ダイアグラムから生まれました。U...

ラベルとスパンの幅設定が無効である問題の解決

デフォルトでは、ラベルとスパンの幅の設定は無効です。一般的に、表示属性は必須ですコードをコピーコード...

MySql5.7.18 の文字セット構成の詳細なグラフィック説明

背景:かなり前(2017.6.5、記事にはタイムリーさがあり、特に使用されているツールは頻繁に更新さ...

レスポンシブ Web デザイン手法を実装し、ウォーターフォール モデルに別れを告げる 5 つのステップ (グラフィック チュートリアル)

次の Web デザイン プロジェクトはレスポンシブにする必要があると上司をようやく納得させることがで...

Dockerコンテナを使用してプロキシ転送とデータバックアップを実装する方法

序文アプリケーションを Docker コンテナとしてサーバーにデプロイする場合、通常はネットワークと...

du コマンドを使用して Linux システム ディレクトリのサイズを取得する方法

Linux システムを使用したことがある人なら、Linux システムの ls コマンドは通常、ファイ...

MySQLのSeconds_Behind_Masterの詳細な説明

目次マスターの後ろの秒数オリジナルの実装最終マスタータイムスタンプマスターとのクロック差他の実行時間...

モバイル Web WAP には Bootstrap と jQuery Mobile のどちらを使用すべきか

問題を解決するBootstrap は、次の問題を解決する CSS フレームワークです。デバイス間での...