1. 程式人生 > >不同瀏覽器對回車提交表單的處理辦法(轉載)

不同瀏覽器對回車提交表單的處理辦法(轉載)

在IE和Firefox下
1、<form>屬性的“action”欄位必填;
2、有一個type="submit"的“input”。

在Chrome和Safari下
滿足第一條即可。(註釋1)

  如果要控制提交行為的話(比如,提交前檢查必填項是否已填),可以在type="submit"的“input”後新增Javascript“onXXX(比如onClick)”事件。而如果需要用非同步互動來檢測相關欄位,則無效了。因為return false是作為onreadystate=的子函式,並不能控制全域性。這時就需要用到<form>的“onsubmit”屬性。 (註釋2)

  比如:

<form name="form1" id="form1" action="act.php" method="post" onsubmit="myfn();return false;">

  myfn()是自己定義的函式:無論通過什麼辦法(比如敲擊“enter”或點選type="submit"(而不是type="button")的“input”按鈕)提交,都會觸發這個這個函式。於是,大可不必再在type="submit"的“input”後新增Javascript事件“onXXX”了。直接在“onsubmit”中控制,更直觀與統一,除非有意控制提交方式(是onClick還是什麼)。

  return false位於末尾,表示不提交本表單。提交表單的字句document.form1.submit()可以作為myfn()的一個選擇條件的分支。

總結:
  這樣,<form>有“action”和“onsubmit”屬性,有type="submit"的“input”的提交按鈕後,就可以在任何瀏覽器下(不行嗎?請給我反饋)實現使用“Enter”鍵和滑鼠都可以對錶單的相關欄位進行非同步(Ajax)和同步(單純的Javascript)檢查並予以提交。

其他:

1、如果使用type="button"來非同步檢測相關欄位呢?
  這樣,這個“input”必須得有一個事件觸發器。在IE和FF下,無法直接在文字框中按下“Enter”來提交表單。如果要的話,需要使用額外的函式來監聽使用者按下了什麼,給出一個怎樣的反映(註釋3)。更糟糕的是,在Ch和Sa下,會忽略是否有type="submit"按鈕,而直接根據“action”屬性來提交表單,如此以來,便無法實現預期的檢測,可能還有更麻煩的後果。

2、如果不寫“action”屬性,直接非同步提交表單呢?
  這樣,通過非同步的方式提交表單,而不僅僅是檢測,這個屬性則沒有必要。而且還是多餘。假如這樣能提供更好的使用者體驗,何樂而不為呢?呵呵。

【註釋】

1、在IE8,FF,Ch中測試有效。Opera和Sa沒有測試。

  chrome在表單中敲回車鍵會觸發提交表單。
  一個登入口在IE、firefox下敲回車後用js通過ajax驗證成功後進行跳轉,幾個輸入框寫在了一個form中,當用戶輸入使用者密碼後觸發ajax進行判斷,此時IE和firefox都不會進行進行form的提交,且form中沒有submit.而chorm和safari都會把此時input所有的form進行submit。
  以後ajax的話,切記不要寫在form當中。

2、chrome 瀏覽器上避免回車提交表單

  之前在論壇上發過一貼,問“在chrome瀏覽器上如何改變回車按鍵或者讓它無效也可以”的問題,終無解。
  問題當時是為了避免回車提交表單引出的,現在這個問題到是解決了,其實很簡單,只怪自己沒想到在Form的提交事件上動手腳:

onsubmit=“MySubmit();return false;"

  MySubmit()可以用來做提交時的判斷,如可一用另一個隱藏的表單完成自定義的提交任務。
  這個問題有點菜,但的在chrome上改變回車事件卻不好搞,有知情者還望告知。

3、同時在IE和FF獲取KeyCode

  以前一直在IE8中測試網站,後來寫的一部分含有Ajax的程式碼出現了故障,不得已下載了Firefox以及它的外掛Firebug,才發現,FF不支援windows.event事件。於是換了一種思路。

<input type="password" name="psw" id="loginpsw" onkeypress="submit1(event)"/>
function submit1(e){
  var isie = (document.all) ? true : false;//判斷是IE核心還是Mozilla
  var key;
  if (isie)
    key = window.event.keyCode;//IE使用windows.event事件
  else
    key = e.which;//3個按鍵函式有一個預設的隱藏變數,這裡用e來傳遞。e.which給出一個索引值給Mo核心(註釋1)
  if(key==13)
    send1('loginemail','loginpsw');//觸發的事件,可自定義
}

原文連結:http://www.codesky.net/article/doc/201004/20100417043901.htm