v-on キー修飾子の使い方-Vue.js
Vue.js Article
ここでは、v-onディレクティブの修飾子のうちキー修飾子の使い方をサンプルコードを参考に解説していきます。
キー修飾子とは
キー修飾子はキーボードからのイベントを監視したい場合に用いることのできる修飾子です。基本の記述の仕方は以下の通りです。
v-on:キーボードイベント.特定のキー="ハンドラ"動くコードとその結果を見てみます。
<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押すと以下のような結果になります。
downキーボードイベントの種類
キーボードイベントには以下の種類があります。
| 修飾子 | 内容 |
|---|---|
| shift | Shiftキー |
| ctrl(control) | Ctrlキー |
| alt | Altキー |
各イベントの処理
それぞれのイベントの処理について詳しく確認してみます。
<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押すと以下のような結果になります。
down
press
up上記からもわかるように処理される順番としてはdown => press => upとなります。また、キーを長押しした場合にはdownとpressが連続して処理されます。
down
press
down
press
.
.
.キーの指定の仕方
監視するキーの指定の仕方には以下のような種類があります。
- エイリアスで指定
- KeyboardEvent.keyで公開されているものケバブケースで指定
- keyCodeで指定
エイリアスで指定
Vue.jsでは一般的に使用されるキーコードのエイリアスを提供しています。
| エイリアス | 内容 |
|---|---|
| enter | Enterキー（Returnキー） |
| tab | Tabキー |
| delete | Delete キーと Backspace キーの両方 |
| esc | Escキー |
| space | スペースバー |
| up,down,left,right | 方向キー |
ケバブケースで指定
Vue.jsではKeyboardEvent.keyで公開されているものケバブケースで指定することができます。
<input v-on:keydown.page-down="func('down')"/>確認する際に注意しておきたいのがノートパソコンなどでは指定したキーがなく、ファンクションキーなど特定のキーと同時に押さないと入力されない点です。普段使わないキーなどは忘れがちなので気を付けておきたいです。
keyCodeで指定
イベントに割り当てられているkeyCode属性（event.keyCodeで確認できる）を指定することができます。
<input v-on:keydown.65="func('down')"/>しかし公式でも言われているように非推奨となっています。
また、以下のコードで示すようにpressはdownとupと違う動きをするので注意が必要です。
<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の結果が違ってくることがあります。
down: a => 65
press: a => 97
up: a => 652つ目のinputのkeyCodeに任意のキーを指定して、入力すると実行されないといった結果が得られます。
上記のコードで上の結果が得られたときaを2つ目のinputに入力すると以下のようになります。
down called
up calledその他特徴
特徴として以下のような点があります。
- 複数指定可能
- カスタムキーエイリアスを定義
複数指定可能
以下に示すように複数指定することができます。
<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>カスタムキーエイリアスを定義
独自のエイリアスを定義できます。
<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.config.keyCodes = {
mediaPlayPause: 179, // 使えない
"media-play-pause": 179,
}まとめ
今回はキー修飾子の基本的な使い方について解説しました。
他の修飾子については別の記事で解説していきたいと思います。