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 のインストールと使用方法のグラフィックチュートリアル

推薦する

VMware12 インストール centOS8 構成グラフィック チュートリアルの詳細説明 (vm 仮想マシン インストール centos8 チュートリアル)

数日前に CentOS8 がリリースされました。8 の最初のバージョンですが、今日は VM12 に ...

Web アプリ開発時間を短縮する 10 の時間を節約するヒント (グラフィカル チュートリアル)

今日の開発環境では、速いほど良いです。 「迅速なアプリケーション開発」、「アジャイル ソフトウェア開...

誰もが知っておくべきウェブサイトのユーザビリティに関する 10 のヒント

これ以上時間を無駄にせず、早速本題に入りましょう。 1. ロゴに代替テキストを追加するこれには 2 ...

Vueシングルページアプリケーションの事前レンダリング方法の例

目次序文vue-cli 2.0 バージョンvue-cli 3.0 バージョン要約する序文vue-cl...

テーブルを使用してフォームコントロールの形式を調整し、見栄えを良くします。

自分でウェブページを書きたいので、HTML 言語についても少し勉強しています。これは、大学時代にウェ...

Linux環境でログファイルを表示するコマンドの詳細な説明

目次序文1. catコマンド: 2. moreコマンド: 3. lessコマンド: 4. headコ...

スクロールバーを非表示にする HTML の簡単な実装

1. 属性付きHTMLタグXML/HTML コードコンテンツをクリップボードにコピー< htm...

JavaScriptの詳細な分析と方向の変更方法

目次これ方法オブジェクト内これを隠した厳密モードこれを変更してこれいつものように、まずはコードを見て...

Linux RabbitMQ クラスタ構築プロセス図

1. 全体的な手順冒頭で、RabbitMQ サービスをインストールして実行する方法を紹介しましたが、...

Vueプロジェクトをパッケージ化してリリースする手順

目次1. 開発環境から本番環境への移行2. 統一されたリクエストパスを設定する3. パッケージ化コマ...

MySQL が自動的に再起動する問題の解決方法

序文最近、テスト環境で MySQL データベースが自動的に再起動し続ける問題が発生しました。原因は、...

Nginx rtmp モジュールのコンパイル ARM バージョンの問題

目次1. 準備: 2. ソースコードのコンパイル1. 設定する2. コンパイルエラー3. ターゲット...

MySQL データベースの最適化: インデックスの実装原則と使用状況の分析

この記事では、例を使用して、MySQL データベースの最適化のためのインデックス実装の原則と使用方法...

MySQL 8.0 が起動できない 3534 の解決策

MySQL 8.0 サービスを開始できません最近、 cmdで MySQL サービスを起動するときに遭...

MySQL シリーズ 12 バックアップとリカバリ

目次チュートリアルシリーズ1. バックアップ戦略の説明1. バックアップの種類2. バックアップで考...