v-on

v-on キー修飾子の使い方-Vue.js

Vue.js Article

ここでは、v-onディレクティブの修飾子のうちキー修飾子の使い方をサンプルコードを参考に解説していきます。

キー修飾子とは

キー修飾子はキーボードからのイベントを監視したい場合に用いることのできる修飾子です。基本の記述の仕方は以下の通りです。

Vue.js
v-on:キーボードイベント.特定のキー="ハンドラ"

動くコードとその結果を見てみます。

Vue.js
<div id="app">
  <input
    v-on:keydown.enter="func('down')"
    />
</div>
<script>
  var app = new Vue({
    el: "#app",
    methods:{
      func(target){
        console.log(target)
      }
    }
  })
</script>

inputタグにフォーカスした状態でEnter押すと以下のような結果になります。

console
down

キーボードイベントの種類

キーボードイベントには以下の種類があります。

修飾子内容
shiftShiftキー
ctrl(control)Ctrlキー
altAltキー

各イベントの処理

それぞれのイベントの処理について詳しく確認してみます。

Vue.js
<div id="app">
  <input
    v-on:keypress.enter="func('press')"
    v-on:keydown.enter="func('down')"
    v-on:keyup.enter="func('up')"
    />
</div>
<script>
  var app = new Vue({
    el: "#app",
    methods:{
      func(target){
        console.log(target)
      }
    }
  })
</script>

inputタグにフォーカスした状態でEnter押すと以下のような結果になります。

console
down
press
up

上記からもわかるように処理される順番としてはdown => press => upとなります。また、キーを長押しした場合にはdownpressが連続して処理されます。

console
down
press
down
press
.
.
.

キーの指定の仕方

監視するキーの指定の仕方には以下のような種類があります。

  • エイリアスで指定
  • KeyboardEvent.keyで公開されているものケバブケースで指定
  • keyCodeで指定

エイリアスで指定

Vue.jsでは一般的に使用されるキーコードのエイリアスを提供しています。

エイリアス内容
enterEnterキー(Returnキー)
tabTabキー
deleteDelete キーと Backspace キーの両方
escEscキー
spaceスペースバー
up,down,left,right方向キー

ケバブケースで指定

Vue.jsではKeyboardEvent.keyで公開されているものケバブケースで指定することができます。

Vue.js
<input v-on:keydown.page-down="func('down')"/>

確認する際に注意しておきたいのがノートパソコンなどでは指定したキーがなく、ファンクションキーなど特定のキーと同時に押さないと入力されない点です。普段使わないキーなどは忘れがちなので気を付けておきたいです。

keyCodeで指定

イベントに割り当てられているkeyCode属性(event.keyCodeで確認できる)を指定することができます。

Vue.js
<input v-on:keydown.65="func('down')"/>

しかし公式でも言われているように非推奨となっています。

また、以下のコードで示すようにpressdownupと違う動きをするので注意が必要です。

Vue.js
<div id="app">
  <input
    v-on:keypress="func('press', $event)"
    v-on:keydown="func('down', $event)"
    v-on:keyup="func('up', $event)"/>
  <input
    v-on:keypress.65="call('press')"
    v-on:keydown.65="call('down')"
    v-on:keyup.65="call('up')"/>
</div>
<script>
  var app = new Vue({
    el: "#app",
    methods:{
      func(target, event){
        console.log(target + ': ' + event.key + ' => ' + event.keyCode)
      },
      call(target){
        console.log(target + ' called')
      }
    }
  })
</script>

上記のコードで1つ目のinputに適当なキーで入力すると、一部のキーではkeyCodeの結果が違ってくることがあります。

console
down: a => 65
press: a => 97
up: a => 65

2つ目のinputのkeyCodeに任意のキーを指定して、入力すると実行されないといった結果が得られます。 上記のコードで上の結果が得られたときaを2つ目のinputに入力すると以下のようになります。

console
down called
up called

その他特徴

特徴として以下のような点があります。

  • 複数指定可能
  • カスタムキーエイリアスを定義

複数指定可能

以下に示すように複数指定することができます。

Vue.js
<div id="app">
  <input v-on:keydown.up.down.left.right="func('down')" />
</div>
<script>
  var app = new Vue({
    el: "#app",
    methods: {
      func(target) {
        console.log(target)
      }
    }
  })
</script>

カスタムキーエイリアスを定義

独自のエイリアスを定義できます。

Vue.js
<div id="app">
  <input
    v-on:keypress.a="call('press')"
    v-on:keydown.a="call('down')"
    v-on:keyup.a="call('up')"/>
  <input
    v-on:keypress.b="call('press')"
    v-on:keydown.b="call('down')"
    v-on:keyup.b="call('up')"/>
</div>
<script>
  var app = new Vue({
    el: "#app",
    methods:{
      call(target){
        console.log(target + ' called')
      }
    }
  })
  Vue.config.keyCodes = {
    a: 65,
    // 複数のコードを定義
    b: [66, 98],
  }
</script>

以下のようにキャメルケースは使えませんが、ダブルクォーテーションでケバブケースを使用することができます。

Vue.js
Vue.config.keyCodes = {
  mediaPlayPause: 179, // 使えない
  "media-play-pause": 179,
}

まとめ

今回はキー修飾子の基本的な使い方について解説しました。 他の修飾子については別の記事で解説していきたいと思います。