はじめに

Vue.js で入力フォーム フォーカス中に Enter キーで Submit させる方法について整理した。

ほぼ参考サイトの通り。

TL;DR

  • 単純に @keyup.enter を使うと、日本語変換での確定 Enter も対象になる
  • @keypress.enter だと、日本語変換での確定 Enter は発火しない
  • 組み合わせてフラグ管理することで実現
この記事が参考になった方
ここかここからチャージや購入してくれると嬉しいです(ブログ主へのプレゼントではなく、ご自身へのチャージ)
欲しいもの / Wish list

目次

  1. はじめに
  2. TL;DR
  3. 環境・条件
  4. 詳細
    1. 参考サイトについて
    2. 完成形(自分の場合の)
      1. さっくりとした処理の流れ
      2. keydown でない理由
  5. まとめ
  6. 参考文献

環境・条件

1
2
3
4
5
6
7
8
9
10
11
$ cat /etc/os-release
PRETTY_NAME="Debian GNU/Linux 10 (buster)"

$ node -v
v12.16.1

$ npm -v
6.13.4

$ npm ls vue
vue@2.6.11 | MIT | deps: none | versions: 263
  • Google Chrome バージョン: 80.0.3987.149（Official Build） （64 ビット）

詳細

参考サイトについて

それぞれやり方は異なるが、考え方は同じ。

完成形(自分の場合の)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<template>
  <input
    type="text"
    @keypress.prevent.enter.exact="enable_submit"
    @keyup.prevent.enter.exact="submit"
  />
</template>

<script>
export default {
  data() {
    return {
      can_submit_search: false,
    };
  },
  methods: {
    enable_submit() {
      this.can_submit_search = true;
    },
    submit() {
      if (!this.can_submit_search) return;
      /* 対象の処理 */
      this.can_submit_search = false;
    },
  },
};
</script>

さっくりとした処理の流れ

keyup, keydown, keypress のイベント発火まわりについては、簡単に以下にまとめてる。

参考: Vue でキーボードでの要素間の移動

日本語変換の場合

Enter キー Down
→ @keypress 発火なし
→ Enter キー Up
→ @keyup が発火
→ フラグ Off で Submit 無し

日本語変換でない場合

Enter キー Down
→ @keypress 発火
→ フラグ On
→ Enter キー Up
→ @keyup が発火
→ フラグ On で Submit
→ フラグ Off

keydown でない理由

どちらが正しいとか言う話ではなくて、「日本語確定時に Enter 押しっぱなしにするとそのまま Submit されるのが個人的にモヤっとした」というだけ。

※ちなみに Google の検索フォームで試したら、そのまま Submit された。

まとめ

  • 単純に @keyup.enter を使うと、日本語変換での確定 Enter も対象になる
  • @keypress.enter だと、日本語変換での確定 Enter は発火しない
  • 組み合わせてフラグ管理することで実現

参考文献

関連記事

この記事が参考になった方
ここかここからチャージや購入してくれると嬉しいです(ブログ主へのプレゼントではなく、ご自身へのチャージ)
欲しいもの / Wish list