哈囉，大家好！我是 Eric。今天我們要來談談一個看似簡單但實則關鍵的議題：表單處理。我們都知道，表單是網頁互動中不可或缺的一部分。但你有沒有遇過這樣的問題：你按下 Enter 鍵卻發現表單沒有被提交？今天來聊聊為什麼這樣會發生，以及如何解決這個問題。

起手式：基本的表單

首先，讓我們看一個非常基礎的例子。這裡有一個簡單的搜尋框，你可以在其中輸入文字，然後點擊「送出」按鈕。

<div id="app">
  <!-- 密碼 -->
  <div>
    <label class="search" for="query">
      <input
          id="query"
          type="text"
          v-model="query"
          placeholder="請輸入關鍵字"
      />
    </label>

    <!-- 點擊 button 送出表單 -->
    <button @click="onSearch">送出</button>
  </div>
</div>
<script>
  let vm = new Vue({
    el: '#app',
    data: {
      query: '',
    },
    methods: {
      onSearch(e) {
        console.log(this.query)
      },
    },
  })
</script>

看起來沒什麼問題，對吧？但如果你嘗試按下 Enter 鍵，你會發現它根本沒有反應。

在 Input 上綁定事件

你可能會想很簡單，我只需要在 input 元素上加一個 keydown 事件就好了，但這其實是一個不太好的做法，原因有兩個：

• 重複綁定：如果你的表單有多個 input 元素，你會需要為每一個都綁定相同的事件。
• 中文輸入問題：如果你正在使用拼音或其他需要確認的輸入法，按下 Enter 鍵可能會不小心觸發提交，這不是我們想要的。

<div id="app">
  <!-- 搜尋 -->
	<div>
  <label class="search" for="query">
    <input
        id="query"
        type="text"
        v-model="query"
        @keydown="onSearch" // 點擊 enter 時觸發
    />
  </label>

  <!-- 送出表單 -->
  <button @click="onSearch">送出</button>
</div>
<script>
  let vm = new Vue({
    el: '#app',
    data: {
      query: '',
    },
    methods: {
      onSearch(e) {
        console.log(this.query)
      },
    },
  })
</script>

解決方案：用 Form 包裹 Input

解決這個問題其實很簡單，我們應該用 form 元素來包裹所有的 input，然後在 form 上綁定一個 submit 事件。

<div id="app">
  <!-- 搜尋 -->
  <form @submit="onSearch">
    <label class="search" for="query">
      <input id="query" type="text" v-model="query" placeholder="請輸入關鍵字" />
    </label>

    <!-- 送出表單 -->
    <button>送出</button>
  </form>
</div>
<script>
  let vm = new Vue({
    el: '#app',
    data: {
      query: '',
    },
    methods: {
      onSearch(e) {
        e.preventDefault() // 阻止預設頁面刷新
        console.log(this.query)
      },
    },
  })
</script>

這麼做有幾個明顯的好處：

• 智能化：瀏覽器會自動處理 Enter 鍵的行為，包括與輸入法的交互。
• 統一處理：你只需要在一個地方綁定事件，無論你有多少個 input 元素。
  還有更多 Form 的其他好處，請參考 mdn：https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/form

結論：永遠使用 Form

所以，無論你是要建立一個簡單的搜尋框，還是一個複雜的多步驟表單，請 always 使用 form。
那麼這次的分享就到這裡啦~我們明天見~