Vue のキーボードイベント監視の概要

Vue のキーボードイベント監視の概要

キー修飾子

キーボード イベントをリッスンする場合、詳細なキーを確認する必要があることがよくあります。 Vue では、キーボード イベントをリッスンするときに v-on にキー修飾子を追加できます。

<!-- `key` が `Enter` の場合にのみ `vm.submit()` を呼び出します -->
<入力v-on:keyup.enter="送信">

KeyboardEvent.key によって公開される有効なキー名をケバブケースに変換するだけで、修飾子として使用できます。

<input v-on:keyup.page-down="onPageDown">

必要に応じて古いブラウザをサポートするために、Vue は最も一般的なキーコードのエイリアスを提供します。

  • -入力
  • - タブ
  • - 削除(「Delete」キーと「Backspace」キーをキャプチャします)
  • -ESC
  • - 空間
  • - 上
  • - 下
  • -左
  • - 右

グローバル config.keyCodes オブジェクトを介してキー修飾子のエイリアスをカスタマイズすることもできます。

// `v-on:keyup.f1` を使うことができます
Vue.config.keyCodes.f1 = 112

システム修飾キー

次の修飾子を使用すると、対応するキーが押されたときにのみマウスまたはキーボード イベントをトリガーするリスナーを実装できます。

  • - .ctrl
  • - .alt
  • - 。シフト
  • - .メタ

何かをする
キーエイリアスとは異なり、修飾キーを keyup イベントで使用する場合、イベントがトリガーされたときに通常のキーを押す必要があります。つまり、keyup.ctrl をトリガーしたい場合は、ctrl キーを押しながら他のキーを放す必要があります。単に ctrl キーを放すだけではイベントはトリガーされません。

<!-- トリガーするには Alt + C を離します -->
<input @keyup.alt.67="クリア">
 
<!-- Alt キーを押しながら任意のキーを離すことでトリガーされます-->
<input @keyup.alt="other"><!-- Ctrl + Enter キーを押すとトリガーされます--><input @keydown.ctrl.13="submit">

elementUI 入力の場合、elementUI が入力をカプセル化し、ネイティブ イベントが機能しないため、最後に .native を追加する必要があります。

<input v-model="form.name" placeholder="ニックネーム" @keyup.enter="送信">

<el-input v-model="form.name" placeholder="ニックネーム" @keyup.enter.native="送信"></el-input>

.exact 修飾子

.exact 修飾子を使用すると、システム修飾子の正確な組み合わせによってどのイベントがトリガーされるかを制御できます。

<!-- Alt キーまたは Shift キーを同時に押した場合でも、この処理が実行されます -->
<button v-on:click.ctrl="onClick">A</button>

<!-- Ctrl キーが押されたときにのみトリガーされます-->
<button v-on:click.ctrl.exact="onCtrlClick">A</button>

<!-- システム修飾子が押されていない場合にのみトリガーされます-->
<button v-on:click.exact="onClick">A</button>

マウスボタン修飾子

  • 。左
  • 。右
  • 。真ん中

これらの修飾子は、ハンドラー関数が特定のマウス ボタンにのみ応答するように制限します。

システムキーの組み合わせ

グローバルキー操作方法を監視したい場合、当然ながら、それをページ要素にバインドすることはできません。

マウントして監視できます:

マウント() {
  document.onkeydown = 関数 (イベント) {
    キーを window.event.keyCode とします。
    if (キー === 65 && event.ctrlKey) { 
      // ctrl+A キーの組み合わせをリッスンします。window.event.preventDefault(); // ブラウザのデフォルトのショートカット キーをオフにします。console.log('crtl+ a キーの組み合わせ')    
    } そうでない場合、key === 83 && event.ctrlKey) {       
      window.event.preventDefault(); //ブラウザのショートカットキーを閉じる console.log('Save');
    }
  }
}

上記の例から、shift、control、Alt は JS では「window.event.shiftKey」、「window.event.ctrlKey」、および「window.event.altKey」に置き換えることもできることがわかります。

付録 - キーボードボタンのキーコード表

以上がVueのキーボードイベント監視の詳細な概要です。Vueのキーボードイベント監視の詳細については、123WORDPRESS.COMの他の関連記事に注目してください。

以下もご興味があるかもしれません:
  • Vue プロジェクトのソフト キーボード入力により検索イベントがトリガーされる
  • Vue キーボード入力イベントの例の説明
  • Vue でキーボード イベントをリッスンする簡単な方法 [推奨]
  • Vue キーボードイベントの使用法の概要
  • Vueのキーボードイベントの詳細な説明

<<:  DockerプライベートイメージライブラリとAlibaba CloudオブジェクトストレージOSSの簡単な分析

>>:  MySQL 5.7.17 のインストールと使用方法のグラフィックチュートリアル

推薦する

モバイル ブラウザのビューポート パラメータ (Web フロントエンド デザイン)

モバイル ブラウザは、Web ページを仮想の「ウィンドウ」(ビューポート) に配置します。このウィン...

JSONP クロスドメインシミュレーション Baidu 検索

目次1. JSONPとは何か2. JSONPクロスドメインリクエスト3. Baidu検索をシミュレー...

ウェブサイトのビジュアルデザイン(画像とテキスト)における情報伝達の役割と方法

現代の Web ビジュアル デザインは、初期の情報の積み重ねから、その後のグラフィックスと抽象化、そ...

フロントエンドにアニメーション遷移効果を実装する方法

目次導入従来のトランジションアニメーションCSS トランジションアニメーションjsアニメーション従来...

CentOS 6.4 で rpm を使用して MySQL をオフラインでインストールする

rpmインストールパッケージを使用してmysqlをオフラインでインストールします。参考までに準備:公...

CSS メニューボタンアニメーション

ドロップダウンメニューを書くには、ボタンをクリックします。メニューの入り口はアイコンボタンをクリック...

Vue3 の動的コンポーネントはどのように機能しますか?

目次1. コンポーネントの登録1.1 グローバル登録1.2 グローバルコンポーネントの登録プロセス1...

MySqlサブクエリINの実装と最適化

目次IN が遅いのはなぜですか? INとEXISTSのどちらが速いでしょうか?効率を向上させるにはど...

MySQL でデータ テーブルを作成し、主キーと外部キーの関係を確立する方法の詳細な説明

序文MySQL テーブルの主キーと外部キーを作成するときは、次の点に注意する必要があります。主キーと...

MySQL でデータ復旧に binlog を使用する方法

序文最近、オンラインでデータが誤って操作されました。データベースが直接変更されたため、それを回復する...

MySQLは現在の日付と時刻を取得する関数

現在の日付 + 時刻 (日付 + 時刻) を取得する関数: now() mysql> now(...

JavaScript は自由に移動するウィンドウのマウス制御を実装します

この記事では、フリーウィンドウのマウス制御を実現するためのJavaScriptの具体的なコードを参考...

MySql インデックスの詳細な紹介と正しい使用方法

MySql インデックスの詳細な紹介と正しい使用方法1. はじめに:インデックスはクエリ速度に重大な...

シンプルな商品スクリーニング機能を実現するjs

この記事の例では、商品スクリーニング機能を実装するためのjsの具体的なコードを参考までに共有していま...

MySQL の遅いクエリとクエリ再構築方法の記録

序文スロークエリとは何か、またスロークエリを最適化するにはどうすればよいか。以下では、これら 2 つ...