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 ファイルの詳細な説明
1. ElasticSearch とは何ですか? Elasticsearch も Java で開発さ...
目次1. タイトル2. コード3. 結果IV. 結論1. タイトルテキスト ボックスに誕生日の値を入...
要素 ui テーブルにはドラッグ アンド ドロップによる並べ替え機能が組み込まれておらず、サードパー...
序文Ahhang が Springboot プロジェクトを開発していたとき、フロントエンドから検証コ...
スクロール バーを下に引くと、主にposition:fixed;スタイルにより、フローティング ボッ...
idea を使用して JSP ファイルを書き込む前に、jdk 環境 (ここでは説明しません) と対応...
大画面のデジタル スクロール効果は、最近の作業における大画面 UI ダイアグラムから生まれました。U...
デフォルトでは、ラベルとスパンの幅の設定は無効です。一般的に、表示属性は必須ですコードをコピーコード...
背景:かなり前(2017.6.5、記事にはタイムリーさがあり、特に使用されているツールは頻繁に更新さ...
次の Web デザイン プロジェクトはレスポンシブにする必要があると上司をようやく納得させることがで...
序文アプリケーションを Docker コンテナとしてサーバーにデプロイする場合、通常はネットワークと...
Linux システムを使用したことがある人なら、Linux システムの ls コマンドは通常、ファイ...
目次マスターの後ろの秒数オリジナルの実装最終マスタータイムスタンプマスターとのクロック差他の実行時間...
問題を解決するBootstrap は、次の問題を解決する CSS フレームワークです。デバイス間での...
問題の説明: docker run -p 19918:19918/tcp -v /etc/local...