基礎からメモ： Vue.js CH3-p103 キーハンドリング

キー修飾子

特定のキーが入力された時のみハンドラが呼び出されるようにする。 一般的によく使用されるキーはエイリアスが登録されている。

このメソッドで試してみる。各ハンドラーに括弧内にあるメッセージ文字列が渡されて、コンソールに表示される。

methods: {
    handler: function(comment) {
      console.log(comment);
    }
}

Enterキーを押したときに呼び出す。Keycode 13 はEnter。.enterでエイリアス

<input v-on:keydown.13="handler('13')">
<input v-on:keydown.enter="handler('enter')">

Tabキー

<input v-on:keydown.tab="handler('tab')">

Deleteキー

<input v-on:keydown.delete="handler('delete')">

Escapeキー

<input v-on:keydown.esc="handler('escape')">

Spaceキー。これは普通にスペースキー押すと空文字が入力されるので、Ctrl+Spaceで入力。

<input v-on:keydown.space="handler('space')">

Upキー

<input v-on:keydown.up="handler('up')">

Downキー

<input v-on:keydown.down="handler('down')">

Leftキー

<input v-on:keydown.left="handler('left')">

Rightキー

<input v-on:keydown.right="handler('right')">

矢印キーなどを複数つなげるとORの意味。上下左右のキーどれかが押されたら反応する。

<input v-on:keydown.up.down.left.right="handler('multi')">

システム修飾子

このメソッドで試してみる。ハンドラーによって input 内の文字が削除される。

methods: {
    doDelete: function() {
        this.message = "";
    }
}

各システムキーを押しながらクリックすると、ハンドラが呼び出される。 メタキーは無いことが多いので、EscかAltで代用されているか、もしくはWindowsキーボードだとWinキー＋Alt

<input type="text" v-bind:value="message">
Shift and Click: <button v-on:click.shift="doDelete">削除キー（Shift ＆ Click）</button>
Ctrl and Click: <button v-on:click.ctrl="doDelete">削除キー（Ctrl ＆ Click）</button>
Alt and Click: <button v-on:click.alt="doDelete">削除キー（Alt ＆ Click）</button>
Meta and Click: <button v-on:click.meta="doDelete">削除キー（Meta ＆ Click）</button>

Ctrl + Shiftを押したときに、コンソールに出力

Ctrl + Shift: <input v-on:keydown.ctrl.shift="handler('Ctrl + Shift')">