【茶包射手日記】網頁 Enter 鍵誤擊刪除鈕疑雲

同事報案,在「以 MVVM 清單實作資料編輯介面」的經典應用場景(Knockout版範例Angular版範例)遇見怪事。新増一筆資料後,將焦點移至 <input type="text"> 輸入欄位,若按下 Enter 資料會莫名消失,按一次消失一筆…

程式用了 jQuery、Bootstrape、Knockout、KendoUI,加上一堆自訂程式庫,無法斷定是誰造成,只好抽絲剝繭,以能重現問題為原則,將掛載的程式庫及 DOM 元素一一拆除。歷經一番功夫,最後竟發現是個 HTML 基本觀念,某自以為資深的網頁設計老鳥,乖乖上了一課。

用一個超精簡範例重現問題:Live Demo

將焦點停在 Input A,按下 Enter 鍵會觸發 Button A 的 onclick 事件;但同樣狀況則不會發生在 Input B 與 Button B 上,關鍵在於 Input A 與 Button A 被包在 <form></form> 之中,而 Input B / Button B 沒有:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Enter on form</title>
</head>
<body>
  <form>
  <fieldset>
    <legend>Inside Form</legend>
      <input type="text" value="Input A"/>
      <button onclick="alert('Button A Clicked');return false;">Button A</button>
  </fieldset>
  </form>
  <fieldset>
      <legend>Outside Form</legend>    
      <input type="text" value="Input B"/>
      <button onclick="alert('Button B Clicked')">Button B</button>
  </fieldset>
</body>
</html>

追究原因,「在輸入欄位按 Enter 送出表單」幾乎是所有瀏覽器的預設行為(感覺是網頁設計基本常識,但先前以寫 AJAX 跟 SPA 為主,碰 Form 的經驗不夠多,沒遇過還真就沒學到),Enter 送出表單可以理解,但瀏覽器送出前還幫忙按下 <form> 裡的第一顆按鈕倒是出乎意料。(在以上範例,Button A onclick alert 完要 return false,不然會觸發表單送出行為)再回頭觀察一開始的展示,按 Enter 被刪除的永遠是第一筆,由此可證。

2017-6-29補充: 貼文後不少網友提醒我 <button> 在各瀏覽器的預設 type 可能不同,而我這也才發現對 Chrome 與 IE 而言,<button> type 預設為 submit,是按 Enter 會連帶觸發按鈕的原因,改為 type="button" 後不再被 Enter 觸發點擊,但在這個案例中要防止表單被送出。感謝大家的回饋~(再上一課)

至於解決方案,用 prevent enter submit form 可以 Google 到一大票詢問與討論,常見做法是攔截 document 或 input 的 keypress 事件,在遇到 Enter 鍵時取消動作。但本案例倒不用這麼麻煩,該段程式以 AJAX 方式運作,用不到 <form> ,是因為寫在 ASP.NET WebForm 才被包在 <form> 中,只需將該段 HTML 移至 <form> 之外,問題即刻消失。

撇開這次遇到的特殊狀況,回到「按 Enter 會送出 Form 」行為上,其實存在爭議。Stackoverflow 上有一堆人詢問如何取消,卻也有人強力主張不該改掉(The Enter Key should Submit Forms, Stop Suppressing it),我則喜歡 StackExchange 的這篇觀點,作者以 Facebook 提供 Press Enter to send 選項為例(過去式 ,現已改版),認為交由使用者決定才是最佳選擇,附議!

歡迎推文分享:
Published 28 June 2017 11:46 PM 由 Jeffrey
Views: 6,431



意見

# 我的驗證碼好難算QQ said on 28 June, 2017 11:06 AM

<button type=button> 試試看?

# ooxx said on 28 June, 2017 11:59 AM

"我的驗證碼好難算QQ" 的解法也是我的作法

將 button 明確的設定為 type=button 就可以了

否則預設 type=submit

(若你不希望他在form中預設有submit的行為)

developer.mozilla.org/.../button

# Jeffrey said on 28 June, 2017 06:48 PM

to 我的驗證碼好難算QQ, ooxx,

在FB上有網友提到各瀏覽器對<button>的預設type不同,而我這才發現Chrome <button> type預設為submit(再上一課),改成type=button就不會Enter被觸發,但仍要防止表單被送出。感謝回饋。

你的看法呢?

(必要的) 
(必要的) 
(選擇性的)
(必要的) 
(提醒: 因快取機制,您的留言幾分鐘後才會顯示在網站,請耐心稍候)

5 + 3 =

搜尋

Go

<June 2017>
SunMonTueWedThuFriSat
28293031123
45678910
11121314151617
18192021222324
2526272829301
2345678
 
RSS
創用 CC 授權條款
【廣告】
twMVC
最新回應

Tags 分類檢視
關於作者

一個醉心技術又酷愛分享的Coding魔人,十年的IT職場生涯,寫過系統、管過專案, 也帶過團隊,最後還是無怨無悔地選擇了技術鑽研這條路,近年來則以做一個"有為的中年人"自許。

文章典藏
其他功能

這個部落格


Syndication