為何 input 在表單中按 Enter 會刷新頁面？解決與防禦指南

根本原因

HTML 表單預設行為：當表單內只有一個單行輸入框，或使用者在任一輸入框按下 Enter，瀏覽器會觸發表單的 submit 事件，導致頁面重新載入（或跳轉至 action 指定的 URL）。

三種阻止預設行為的方法

1. 表單層級：onsubmit="return false" 或 event.preventDefault()

<form onsubmit="return validateForm(this)">
  <input name="username" required>
  <input name="password" type="password" required>
  <button type="submit">登入</button>
</form>

<script>
function validateForm(form) {
  if (!form.username.value) { alert('請輸入帳號'); return false; }
  if (!form.password.value) { alert('請輸入密碼'); return false; }
  // 通過驗證可 return true 送出，或這裡改用 AJAX 送出後 return false
  return false; // 防止頁面跳轉
}
</script>

2. 輸入框層級：onkeydown="return event.key!=='Enter'"

<input onkeydown="return event.key!=='Enter'">

缺點：使用者無法在多行輸入框換行，且需逐個綁定。

3. 全域攔截（jQuery/原生）

// jQuery
$(document).on('keydown', 'form input', function(e){
    if (e.key === 'Enter' && !$(this).is('textarea')) e.preventDefault();
});

// 原生
document.addEventListener('keydown', function(e){
    if (e.key === 'Enter' && e.target.tagName === 'INPUT' && e.target.type !== 'textarea') {
        e.preventDefault();
    }
});

最佳實踐建議

• 表單務必加 onsubmit 驗證，並視情況回傳 false 或改用 fetch/AJAX 非同步送出。
• 若不需傳統表單提交，可將 <form> 改為 <div>，按鈕改 type="button"，完全繞過瀏覽器預設行為。
• 無障礙考量：保留 Enter 送出表單的慣例，改善驗證提示而非單純禁用。

總結

Enter 觸發提交是瀏覽器標準行為，透過 onsubmit 回傳 false 或 event.preventDefault() 即可控制；配合前端驗證與 AJAX，既保留使用者習慣又避免整頁重整。