js では、キーのコードを取得する場合、通常は (keydown/keyup) を介してイベントをバインドし、デフォルトのパラメータ イベントの keyCode 属性を介してコードを取得する必要があります。固定キーを押してイベントをトリガーしたい場合、イベント内で一定の判断を行う必要があり、非常に面倒になります。 var 入力 = document.querySelector('入力') input.onkeyup = 関数 (e) { (e.keyCode == 13)の場合 console.log('私はEnterキーです') } Vue では、よく使用されるボタンのいくつかにエイリアスが提供されており、イベント内で手動で判断することなく、イベント後に対応するエイリアスを追加するだけで済みます。 共通キーエイリアスVue には、よく使用されるボタンに次のようなエイリアスがバインドされています。
エイリアスを使用して、キーボード イベント (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 のその他のコンテンツにも注目していただければ幸いです。 以下もご興味があるかもしれません:
|
<<: Linux システムの .bash_profile ファイルの詳細な説明
HTML ドキュメント内の要素は次々に配置され、ブロックレベル要素の前後に改行が追加されるだけで、合...
MySQL レプリケーション テーブルの詳細な説明テーブル構造、インデックス、デフォルト値などを含む...
MySQL ストアド プロシージャ1. ストアドプロシージャ構文(フォーマット)を作成する 区切り文...
導入Kubernetes を使い始めるのに丸一日を費やしたことはありませんか?最近登場したいくつかの...
別のライブラリから別のライブラリにデータをインポートする必要がある場合があり、このデータは CSV ...
1. 既存のnginxがipv6をサポートしているかどうかを確認する既存の nginx が ipv6...
IE ブラウザで「ホームページとして設定」および「お気に入りに追加」機能を実装する方法解決:指定さ...
ルートジャンプ this.$router.push('/course'); this...
<br />私はこの問題で気が狂いそうです。症状は次のとおりです。 症状の説明: Int...
Linux では、すべてがファイルであり (ディレクトリもファイルです)、各ファイルにはユーザーに対...
序文現在、フロントエンドは主に webpack の devServer の構成を通じてクロスドメイン...
序文この記事では、MySQL 5.7 グリーン バージョンのインストール チュートリアルを紹介します...
ボタンをクリックしてテキストを入力ボックスに変換し、保存をクリックしてテキスト実装コードに変換します...
1. ASP.NET Web アプリケーションのテンプレートとは何ですか? それらの違いは何ですか?...
MySQL はほとんどの場合、GROUP BY クエリと DISTINCT クエリを同様に処理します...