#概要
ユーザーにフォームに入力させる際に、確定のEnterをトリガーにしてpostしたくて実装していたのですが、
フォーム入力時のEnterも関数が動いてしまいました。
IME(日本語等の文字入力)の場合は通常のEnterとキーコードが違ったみたいで、このような事象が起こったようです。
その解決法をメモします。
#実装
通常のEnterキーコード以外は受け付けないようにすれば良いです。
Enterは'13'でIME入力のEnterは'229'みたいなので、13以外は受け付けないようにします。
Vue.jsで実装します。
キーコード一覧
↓
https://shanabrian.com/web/javascript/keycode.php
.vue
<template>
<div>
<input
id="search"
v-model="word"
type="search"
placeholder="キーワードを入力..."
@keydown.enter="searchTags">
</div>
</template>
<script>
computed: {
word: {
get() {
return this.$store.getters['search/word']
},
set(val) {
this.$store.commit('search/setWord', val)
},
},
},
methods: {
async searchTags(e){
if (e.keyCode !== 13) return
this.$store.dispatch('search/searchTags')
},
},
</script>
@keydown.enterでキー入力のイベントを取得します。
.js
if (e.keyCode !== 13) return
でキーコードが13以外の場合はそのままreturnします。
#参考文献