0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

[JavaScript] IME入力中Enterと通常Enterはキーコードが違うらしい

Posted at

#概要

ユーザーにフォームに入力させる際に、確定の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します。

#参考文献

VueのEnterキーイベントで日本語入力中のEnterを制御する

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?