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コードに基づく画像断片化読み込み機能の実装

推薦する

HTML テーブルレイアウト例の説明

HTML ドキュメント内の要素は次々に配置され、ブロックレベル要素の前後に改行が追加されるだけで、合...

MySQL レプリケーション テーブルの詳細とサンプル コード

MySQL レプリケーション テーブルの詳細な説明テーブル構造、インデックス、デフォルト値などを含む...

MYSQLストアドプロシージャ、つまり一般的な論理知識のポイントの要約

MySQL ストアド プロシージャ1. ストアドプロシージャ構文(フォーマット)を作成する 区切り文...

kindとDockerを使用してローカルKubernetes環境を起動する

導入Kubernetes を使い始めるのに丸一日を費やしたことはありませんか?最近登場したいくつかの...

MySql インポート CSV ファイルまたはタブ区切りファイル

別のライブラリから別のライブラリにデータをインポートする必要がある場合があり、このデータは CSV ...

Linux システムで IPv6 をサポートするように Nginx を設定する方法

1. 既存のnginxがipv6をサポートしているかどうかを確認する既存の nginx が ipv6...

HTML をホームページとして設定し、お気に入りに追加_Powernode Java Academy

IE ブラウザで「ホームページとして設定」および「お気に入りに追加」機能を実装する方法解決:指定さ...

ウェブデザインスキル:中国語と英語が混在するウェブページの上位表示の問題

<br />私はこの問題で気が狂いそうです。症状は次のとおりです。 症状の説明: Int...

Linux のファイル権限とグループ変更コマンドの詳細な説明

Linux では、すべてがファイルであり (ディレクトリもファイルです)、各ファイルにはユーザーに対...

Chromeブラウザ設定の新バージョンではクロスドメイン実装が可能

序文現在、フロントエンドは主に webpack の devServer の構成を通じてクロスドメイン...

Windows2008 64 ビット システムでの MySQL 5.7 グリーン バージョンのインストール チュートリアル

序文この記事では、MySQL 5.7 グリーン バージョンのインストール チュートリアルを紹介します...

ボタンをクリックしてテキストを入力ボックスに変換し、保存をクリックしてテキスト実装コードに変換します。

ボタンをクリックしてテキストを入力ボックスに変換し、保存をクリックしてテキスト実装コードに変換します...

ウェブデザイナー職の面接でよくある質問と回答

1. ASP.NET Web アプリケーションのテンプレートとは何ですか? それらの違いは何ですか?...

MySQLグループクエリ最適化方法

MySQL はほとんどの場合、GROUP BY クエリと DISTINCT クエリを同様に処理します...