Rails(普通にsubmitしている場合)と、Nuxt(jsでアクションしている場合)で挙動が違うので、確認して調整してみました。
地味だけど、方針を決めて、統一しておくと全体の操作性が上がりますね。

[Rails] Enterで送信されないようにする

普通にsubmit使っていると、入力項目でEnterを押すと送信される。
登録や変更等、重要なアクションでは不用意に送信されないようにした方が良いですね。
typeがsubmitからbuttonになるように変更して、onclickでsubmitするように変更。

-  <%= form.submit '登録', class: 'btn btn-primary' %>
+  <%= form.submit '登録', type: 'button', onclick: 'submit()', class: 'btn btn-primary' %>

コミット内容
https://dev.azure.com/nightonly/rails-app-origin/_git/rails-app-origin/commit/f4a3020f775e8e65e5f9833da6db30c667b17afb?path=/app/views/users/registrations/_new_user.html.erb

[Nuxt] Enterで送信(アクション)できるようにする

ボタンの@clickで何らかのアクションをする事が多いと思いますが、その場合、入力項目でEnterを押しても反応しない。(例外あり)
ログインや検索等は、Enterで次のアクションができると便利ですね。
text-fieldに書いても良いけど、それぞれに書く必要があるので、上の要素(但し、formだと効かない)に設定しました。

      <validation-observer v-slot="{ invalid }">
        <v-form autocomplete="on">
          <v-card-title>ログイン</v-card-title>
          <v-card-text
+            @keyup.enter="onSignIn(invalid)"
          >
            <validation-provider v-slot="{ errors }" name="email" rules="required|email">
              <v-text-field
<省略>
              />
            </validation-provider>
            <v-btn
              id="sign_in_btn"
              color="primary"
              :disabled="invalid || processing || waiting"
              @click="onSignIn(invalid)"
            >
              ログイン
            </v-btn>

コミット内容
https://dev.azure.com/nightonly/nuxt-app-origin/_git/nuxt-app-origin/commit/6add50310b51400359e0eb3bcd1c2f845894e211?path=/pages/users/sign_in.vue

IME確定のEnterやShift+Enter等で送信されないようにする

上記だとIMEでの入力確定のEnterでも送信されてしまいます。
序でにShift+Enter等でも送信されないようにします。

@keydown.enterのみ、キーコードが229になる特性?を利用します。
keyCodeは非推奨なので、isComposingを利用します。
但し、keyupはfalseになるので、keydownで判定します。
イベント発火はkeydownだと早いので、keyupのままにしました。

参考: 【備忘録】KeyboardEvent.keyCode が非推奨になっていたので KeyboardEventを整理してみた – make it easy

          <v-card-text
-            @keyup.enter="onSignIn(invalid)"
+            @keydown.enter="onKeyDown"
+            @keyup.enter="onSignIn(invalid, true)"
          >
<省略>
  data () {
    return {
      waiting: false,
      email: '',
      password: '',
+      keyDownEnter: false
    }
  },
<省略>
  methods: {
+    // Tips: IME確定のEnterやShift+Enter等でログインされないようにする
+    onKeyDown (event) {
+      this.keyDownEnter = event.keyCode === 13 && !event.altKey && !event.ctrlKey && !event.metaKey && !event.shiftKey
+      this.keyDownEnter = !event.isComposing && !event.altKey && !event.ctrlKey && !event.metaKey && !event.shiftKey
+    },
+
    // ログイン
-    async onSignIn (invalid) {
+    async onSignIn (invalid, keydown = false) {
+      const enter = this.keyDownEnter
+      this.keyDownEnter = false
-      if (invalid || this.processing || this.waiting) { return }
+      if (invalid || this.processing || this.waiting || (keydown && !enter)) { return }

コミット内容
https://dev.azure.com/nightonly/nuxt-app-origin/_git/nuxt-app-origin/commit/7c037c89ccc90be1f2c74ccce3914d93231f410c?refName=refs%2Fheads%2Fdevelop&path=%2Fpages%2Fusers%2Fsign_in.vue

[Nuxt] Enterで送信されないようにする(入力項目が1つの場合)

HTMLの仕様上、複数の項目があると発生しないsubmitが、1つだと発生してしまう。
入力した文字列が消えてしまい、バグっぽい動きになってしまうので困る。
下記で抑制できるので、1つの場合は入れつつ、
更にEnterでアクションできるようにしたい場合は、上記の@keyup.enterも併用すると良い。

参考: v-form (Vuetify) の submit イベントによってページがリロードされないようにする | Articles | Riotz.works

-        <v-form autocomplete="off">
+        <v-form autocomplete="off" @submit.prevent>

コミット内容
https://dev.azure.com/nightonly/nuxt-app-origin/_git/nuxt-app-origin/commit/6add50310b51400359e0eb3bcd1c2f845894e211?path=/pages/users/password/new.vue

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です