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」に置き換えることもできることがわかります。