「If you have focus in the textbox and hit enter, the form will be submitted automatically. This behavior is consistent across all browsers and is known as implicit submission.」

 

日前在搜尋資料時,正好看到了某篇部落格文章。

是說在文字框 ( TextBox ) 按下 Enter 後,表單 ( Form ) 就會自動被送出,且會觸發 form 的第一顆按鈕 Click 事件。

以往沒遇過這樣的需求,也沒遇過這樣的問題。研究了一下作為紀錄。

 

隱式提交 ( Implicit submission )


  直接切入主題,當網頁的焦點 ( Focus ) 在輸入框中並按下 Enter 鍵,此時其所屬的 Form 會自動被提交。

  經搜尋,此為 Html Standard 4.10.21.2, Implictit submission,稱為隱式提交,此行為在各瀏覽器中幾乎一致通用。

  觸發情境

   1. form 具有提交按鈕 ( submit button )

   2. form 僅有一個輸入元件 ( input )

  Html Standard 4.10.21.2

  關於 Html Standard 4.10.21.2 的說明,可參閱此處

  基本包含幾項重點如下

   1. 某些 Web 網頁僅有在支援隱式提交時才可使用,因此強烈建議 user agents ( 以下都簡單稱瀏覽器 ) 支持此點。

   2. Form 的預設按鈕是,桉樹狀排序的第一個提交按鈕。

   3. 如果瀏覽器支援使用者隱式提交表單,同時該表單預設按鈕非禁用 ( disabled ) ,此時瀏覽器觸發預設按鈕的 Click 事件

   4. 在沒有提交按鈕的狀況,如有一個以上的欄位 ( Field ) ,則隱式提交機制什麼都不做;否則必須提交表單本身。

   5. 依上點,一個以上的欄位 ( Field ) 會阻止隱式提交表單,且 type 屬性是以下其中之一 :  Text、Search、URL、Telephone、Email、Password、Date、Month、Week、Time、Local Date and Time, Number。

  

測試情境


  以下的 input 皆以 Text 為例。實際的情境會有許多情形,此處就僅列出幾個常見與特別的範例供大家參考~

 

  No Button

  未包含任何 button,三個區域分別為 : 一個在 form 裡面的 input,另一個則否,以及多個 input ,以上三種情境。

  前者 Enter 後表單被提交;後兩者 Enter 皆無反應。

  範例

 

  Single Button

  三個區域中皆有複數個 Input 欄位,分別為沒有 button 、Button Type 及 Submit Type

  僅有最後者 Enter 會觸發隱式提交

  範例

 

  Multiple Button

  表單中有多個 input ,前者為一個 Submit Button 與 多個 Button ,後者為多個 Submit Button

  則多個 Submit Button 的情境下,仍會觸發隱式提交

  範例

 

  About Button Event

  替頁面的 button 都註冊彈窗事件

  前者按鈕 type 為 button ,任意輸入內容後在文字框 enter ,不會觸發按鈕事件,表單直接被送出

  後者按鈕 type 為 submit ,則會先執行按鈕事件才送出表單 ( 如果在按鈕事件設定 return false; 則該表單不會被送出 )

  範例

 

結語


  研究的過程,也看到不少討論關於,要怎麼移除隱式提交,而這關係到使用者習慣與開發者所使用的技術。

  現在經手的專案,很多都採用 ajax ( 非同步技術 ),

  使用 form 越來越少,甚至有些人可能完全不會碰到,也因此更不會接觸到這些基本概念。

  此篇以介紹隱式提交為主,若欲找方法移除者可參考 keydown Function 與 event.keyCode

  再進階則與 Bubbling 、preventDefault() ( 停止事件的默認動作 ) 相關

  則又牽扯到其他概念,所以此處暫先不詳細列出,後面若有時間再另開篇幅說明~

  參考資料

文章標籤
全站熱搜
創作者介紹
創作者 律晴音 的頭像
律晴音

聆風之境

律晴音 發表在 痞客邦 留言(0) 人氣(216)