はじめに

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 v 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