SIerだけど技術やりたいブログ

5年目のSIerのブログです

Vuejs formタグ内のテキストフィールドでEnter押下時に、メソッドを実行する

SPAの場合はformタグに任せてデータをPOSTすることは稀で、通常は自身で定義したハンドラを呼び出してAjax通信を行う。

以下は、ボタン押下時にexecメソッドを実行する例。

<template>
  <form>
    <input type="text" placeholder="username" />
    <input type="text" placeholder="password" />
    <button type="submit" @click="exec">submit</button>
  </form>
</template>

<script>
export default {
  name: 'HelloWorld',
  methods: {
    exec: function () {
      // 本来はajax通信をする
      console.log('exec')
    }
  }
}
</script>

で、このとき、テキストフィールドでEnterを押してしまうと、一瞬コンソールログが出力された後に、自画面に遷移してしまう。

f:id:kimulla:20171103160527g:plain


これはブラウザの動作が関連していて、HTML5の仕様書から読み取れることは

  • formタグ内のテキストフィールドでEnterを押すと、自動で送信されるようにしたら?(Implicit submission)
  • Enterを押すと、submitボタンに click イベントが発生する
  • 入力フィールドのvalidationに引っかかったらformタグからinvalidイベントが発生する
  • もしvalidationに問題なかったら formタグからsubmitイベントが発生する
  • 誰もsubmitイベントをキャッチしなかったらformが送信される
  • formのaction属性が空だったら、ドキュメントが配置されているアドレスに送信する

4.10 Forms — HTML5

3 Semantics, structure, and APIs of HTML documents — HTML5


ということで、Enter押下時に自画面への遷移を防いでボタン押下時と同じふるまいにするためには、Vuejsの機能を利用してsubmitイベントを黙殺して、自身が作成したハンドラを実行するとよい。そのための仕組みがVuejsに存在する。

jp.vuejs.org

<template>
  <form v-on:submit.prevent="exec">
    <input type="text" placeholder="username" />
    <input type="text" placeholder="password" />
    <button type="submit">submit</button>
  </form>
</template>

<script>
export default {
  name: 'HelloWorld',
  methods: {
    exec: function () {
      // 本来はajax通信をする
      console.log('exec')
    }
  }
}
</script>

これでformタグ内のテキストフィールドでEnterを押下したときも、ボタン押下したときと同じふるまいにできる。
f:id:kimulla:20171103164159g:plain

Vuejsのリファレンスにpreventとかの修飾子が紹介されてるけど、ブラウザの仕組みに詳しくないと使いどころがわからないんだよなぁ。

なぜsubmitにするか?

あとは、submitにするとHTML上でのバリデーションがかけられます。

<template>
  <form>
    <input type="email" placeholder="email" />
    <input type="text" placeholder="password" />
    <button type="button" @click="exec">submit</button>
  </form>
</template>

email形式のチェックが実行されない。
f:id:kimulla:20171107063631g:plain

<template>
  <form>
    <input type="email" placeholder="email" />
    <input type="text" placeholder="password" />
    <button type="submit" @click="exec">submit</button>
  </form>
</template>

email形式のチェックが実行される。
f:id:kimulla:20171107063642g:plain