Vueのキーボードイベントの詳細な説明

js では、キーのコードを取得する場合、通常は (keydown/keyup) を介してイベントをバインドし、デフォルトのパラメータイベントの keyCode 属性を介してコードを取得する必要があります。固定キーを押してイベントをトリガーしたい場合、イベント内で一定の判断を行う必要があり、非常に面倒になります。

 var 入力 = document.querySelector('入力')
    input.onkeyup = 関数 (e) {
        (e.keyCode == 13)の場合
            console.log('私はEnterキーです')
    }

Vue では、よく使用されるボタンのいくつかにエイリアスが提供されており、イベント内で手動で判断することなく、イベント後に対応するエイリアスを追加するだけで済みます。

共通キーエイリアス

Vue には、よく使用されるボタンに次のようなエイリアスがバインドされています。

上矢印: 上
下矢印: 下
左矢印: 左
右矢印: 右
スペース: スペース
改行: タブ
終了: esc
入力: 入力
削除/バックスペース:削除

エイリアスを使用して、キーボードイベント (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として定義します。