キーイベントで特定のキーが押された場合に処理を行うv-onディレクティブのキー修飾子 [Vue.js]

Vue.jsでは特定のキーが押された時にキーイベントを発生させるためのキー修飾子が用意されています。

今回は、キーイベントで特定のキーが押された時にのみ処理を行う際に使用するキー修飾子について紹介します。

1 Vue.jsで使用できるキー修飾子
2 Vue.jsに用意されているキーエイリアス
- 2.1 キーエイリアス一覧
- 2.2 キーエイリアスのキー修飾子を使用した実装例
3 KeyboardEvent.keyプロパティのキー修飾子
- 3.1 KeyboardEvent.keyプロパティのキー修飾子を使用した実装例
4 KeyboardEvent.keyを出力するサンプルアプリ
5 システムキー修飾子
6 Vue.jsのバージョン変更による仕様の変更

Vue.jsで使用できるキー修飾子

キー修飾子として利用できるものには

Vue.jsが用意しているキーエイリアス
KeyboardEvent.keyに対応したキープロパティ
システムキー

があります。

Vue.jsに用意されているキーエイリアス

Vue.jsには最も一般的に使用されるキーコードのエイリアスが提供されています。
キーエイリアスには以下のものがあります。

キーエイリアス一覧

enter
tab
delete
esc
space
up
down
left
right

「enter」はEnterキーに反応します。
「tab」はTabキーに反応します。
「delete」はDeleteキーとBackSpaceキーに反応します。
「esc」はEscキーに反応します。
「space」はSpaceキーに反応します。
「up」は↑キー（矢印キーのUp）に反応します。
「down」は↓キー（矢印キーのDown）に反応します。
「left」は←キー（矢印キーのLeft）に反応します。
「right」は→キー（矢印キーのRight）に反応します。

キーエイリアスのキー修飾子を使用した実装例

キーエイリアスを利用した実装例を以下に示します。

HTML

<div id="app">
  <input type="text"
         v-on:keydown.enter="onKeyDown" />
  <div>
    {{message}}
  </div>
</div>

<input type="text"

v-on:keydown.enter="onKeyDown" />

<div>

</div>

JavaScript

Vue.createApp({
  data: function() {
    return {
      message: ''
    }
  },
  methods: {
    onKeyDown: function(e) {
    console.log(e.key);
      this.message = 'Enterキーが押されました。';
    }
  }
}).mount('#app')

Vue.createApp({

data: function() {

return {

message: ''

}

methods: {

onKeyDown: function(e) {

console.log(e.key);

this.message = 'Enterキーが押されました。';

}

}).mount('#app')

上記の例では、Enterキーが押された時にメッセージを表示しています。

KeyboardEvent.keyプロパティのキー修飾子

JavaScript標準のKeyboardEvent.keyプロパティで定義されている値をキー修飾子として利用することもできます。
KeyboardEventのkeyプロパティの値をキー修飾子として利用する場合は、プロパティ名をケバブケース（kebab-case）に変換した値を使用します。
例えば「Escape」であれば「escape」、「NumLock」であれば「num-lock」になります。
keyプロパティの値が「a」や「b」など、既にケバブケースなっているものはそのまま使用することができます。

KeyboardEvent.keyプロパティのキー修飾子を使用した実装例

keyプロパティを利用した実装例を以下に示します。

HTML

<div id="app">
  <input type="text"
         v-on:keydown.scroll-lock="onKeyDown" />
  <div>
    {{message}}
  </div>
</div>

<input type="text"

v-on:keydown.scroll-lock="onKeyDown" />

<div>

</div>

JavaScript

Vue.createApp({
  data: function() {
    return {
      message: ''
    }
  },
  methods: {
    onKeyDown: function(e) {
    console.log(e.key);
      this.message = 'ScrollLockキーが押されました。';
    }
  }
}).mount('#app')

Vue.createApp({

data: function() {

return {

message: ''

}

methods: {

onKeyDown: function(e) {

console.log(e.key);

this.message = 'ScrollLockキーが押されました。';

}

}).mount('#app')

上記の例では、ScrollLockキーが押された時にメッセージを表示しています。

KeyboardEvent.keyを出力するサンプルアプリ

ここでは、KeyboardEventのkeyプロパティの値をコンソールログに出力する簡単なアプリのコードを掲載しておきます。

HTML

<div id="app">
  <input type="text"
         v-on:keydown="onKeyDown" />
  <div>
    {{message}}
  </div>
</div>

<input type="text"

v-on:keydown="onKeyDown" />

<div>

</div>

JavaScript

Vue.createApp({
  data: function() {
    return {
      key: ''
    }
  },
  methods: {
    onKeyDown: function(e) {
    console.log(e.key);
      this.message = 'Enterキーが押されました。';
    }
  }
}).mount('#app')

Vue.createApp({

data: function() {

return {

key: ''

}

methods: {

onKeyDown: function(e) {

console.log(e.key);

this.message = 'Enterキーが押されました。';

}

}).mount('#app')

上記のサンプルアプリでは、input要素でキーを押すことで、KeyboardEventのkeyプロパティの値がinput要素の下に表示されます。

システムキー修飾子

Vue.jsでは、CtrlキーやShiftキーなどのシステムキーを検知するためのシステム修飾子も用意されています。
システムキー修飾子は、Ctrl + Zキーや、Shift + Enterキーなど、他のキーとセットで利用します。

システムキー修飾子として利用できるキーには以下のものがあります。

システムキー一覧

ctrl
alt
shift
meta

「ctrl」はCtrlキーに反応します。
「alt」はAltキーに反応します。
「shift」はShiftキーに反応します。
「meta」はメタキーに反応します。メタキーはOSごとに異なります。

metaキーについては、Vue.jsの公式ドキュメントに以下のように記載されています。

OSごとのmetaキーについて

Note

注意: Macintosh キーボードの場合、meta はコマンドキー（⌘）です。Windows のキーボードでは、meta はウィンドウキー（⊞）です。Sun Microsystems のキーボードでは、メタは実線のダイヤモンド（◆）とマークされています。特定のキーボードでは、特に MIT や Lisp マシンのキーボードと Knight キーボード、space-cadet キーボード、メタのような後継機には “META” と表示されます。 Symbolics のキーボードでは、 “META” または “Meta” というラベルが付いています。

システムキーのキー修飾子を使用した実装例

システムキーを利用した実装例を以下に示します。

HTML

<div id="app">
  <input type="text"
         v-on:keydown.ctrl.k="onKeyDown" />
  <div>
    {{message}}
  </div>
</div>

<input type="text"

v-on:keydown.ctrl.k="onKeyDown" />

<div>

</div>

JavaScript

Vue.createApp({
  data: function() {
    return {
      message: ''
    }
  },
  methods: {
    onKeyDown: function(e) {
    console.log(e.key);
      this.message = 'Ctrl + Kキーが押されました。';
    }
  }
}).mount('#app')

Vue.createApp({

data: function() {

return {

message: ''

}

methods: {

onKeyDown: function(e) {

console.log(e.key);

this.message = 'Ctrl + Kキーが押されました。';

}

}).mount('#app')

上記の例では、CtrlキーとKキーが押されている場合にイベントが発生します。
Ctrlキーを押さずにKキーのみを押した場合はイベントが発生しないことが確認できます。

Vue.jsのバージョン変更による仕様の変更

Vue.jsのバージョン2.xの時は、以下のようにキーコードによるキーコード修飾子の利用ができましたが、3.xで削除されました。

<!-- Enterキー -->
<input v-on:keyup.13="submit" />

1 2	<!-- Enterキー --> <input v-on:keyup.13="submit" />

また、Vue2.xの時点では、以下のようにカスタムキーエイリアスを定義していました。

Vue.config.keyCodes = {
  f1: 112,
  f2: 113,
  f3: 114,
  f4: 115,
  f5: 116,
  f6: 117,
  f7: 118,
  f8: 119,
  f9: 120,
  f10: 121,
  f11: 122,
  f12: 123
}

Vue.config.keyCodes = {

f1: 112,

f2: 113,

f3: 114,

f4: 115,

f5: 116,

f6: 117,

f7: 118,

f8: 119,

f9: 120,

f10: 121,

f11: 122,

f12: 123

}

Vue3.xでは、キーコードによるキー修飾の削除に伴い、上記のカスタムキーエイリアスの定義も削除されています。

Vue.js 入門 Tips 一覧

リンク