快捷導(dǎo)航

不同瀏覽器對(duì)回車(chē)提交表單的處理辦法

更新時(shí)間：2010年02月13日 09:59:33 作者：

在瀏覽器中填寫(xiě)表單的時(shí)，可以直接在“文本框”中敲擊“Enter”來(lái)提交表單，很是方便。

條件是：
在IE和Firefox下
1、<form>屬性的“action”字段必填；
2、有一個(gè)type="submit"的“input”。
在Chrome和Safari下
滿(mǎn)足第一條即可。（注釋1）
　　所以，如果要控制提交行為的話(huà)（比如，提交前檢查必填項(xiàng)是否已填），可以在type="submit"的“input”后添加Javascript“onXXX（比如onClick）”事件。而如果需要用異步交互來(lái)檢測(cè)相關(guān)字段，則無(wú)效了。因?yàn)閞eturn false是作為onreadystate=的子函數(shù)，并不能控制全局。這時(shí)就需要用到<form>的“onsubmit”屬性(注釋2）。比如：
HTML

復(fù)制代碼代碼如下:

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

myfn()是自己定義的函數(shù)：無(wú)論通過(guò)什么辦法（比如敲擊“enter”或點(diǎn)擊type="submit"（而不是type="button"）的“input”按鈕）提交，都會(huì)觸發(fā)這個(gè)這個(gè)函數(shù)。于是，大可不必再在type="submit"的“input”后添加Javascript事件“onXXX”了。直接在“onsubmit”中控制，更直觀與統(tǒng)一，除非有意控制提交方式（是onClick還是什么）。
return false位于末尾，表示不提交本表單。提交表單的字句document.form1.submit()可以作為myfn()的一個(gè)選擇條件的分支。

總結(jié)：
　　這樣，<form>有“action”和“onsubmit”屬性，有type="submit"的“input”的提交按鈕后，就可以在任何瀏覽器下（不行嗎？請(qǐng)給我反饋）實(shí)現(xiàn)使用“Enter”鍵和鼠標(biāo)都可以對(duì)表單的相關(guān)字段進(jìn)行異步（Ajax）和同步（單純的Javascript）檢查并予以提交。
其他：
1、如果使用type="button"來(lái)異步檢測(cè)相關(guān)字段呢？
　　這樣，這個(gè)“input”必須得有一個(gè)事件觸發(fā)器。在IE和FF下，無(wú)法直接在文本框中按下“Enter”來(lái)提交表單。如果要的話(huà)，需要使用額外的函數(shù)來(lái)監(jiān)聽(tīng)用戶(hù)按下了什么，給出一個(gè)怎樣的反映（注釋3）。更糟糕的是，在Ch和Sa下，會(huì)忽略是否有type="submit"按鈕，而直接根據(jù)“action”屬性來(lái)提交表單，如此以來(lái)，便無(wú)法實(shí)現(xiàn)預(yù)期的檢測(cè)，可能還有更麻煩的后果。
2、如果不寫(xiě)“action”屬性，直接異步提交表單呢？
　　這樣，通過(guò)異步的方式提交表單，而不僅僅是檢測(cè)，這個(gè)屬性則沒(méi)有必要。而且還是多余。假如這樣能提供更好的用戶(hù)體驗(yàn)，何樂(lè)而不為呢？呵呵。
【注釋】
1 在IE8，F(xiàn)F，Ch中測(cè)試有效。Opera和Sa沒(méi)有測(cè)試。

復(fù)制代碼代碼如下:

chrome在表單中敲回車(chē)鍵會(huì)觸發(fā)提交表單 
一個(gè)登錄口在IE、firefox下敲回車(chē)后用js通過(guò)ajax驗(yàn)證成功后進(jìn)行跳轉(zhuǎn)，幾個(gè)輸入框?qū)懺诹艘粋€(gè)form中,當(dāng)用戶(hù)輸入用戶(hù)密碼后觸發(fā)ajax進(jìn)行判斷，此時(shí)IE和firefox都不會(huì)進(jìn)行進(jìn)行form的提交，且form中沒(méi)有submit.而chorm和safari都會(huì)把此時(shí)input所有的form進(jìn)行submit. 

以后ajax的話(huà)，切記不要寫(xiě)在form當(dāng)中. 

2 這篇文章

復(fù)制代碼代碼如下:

chrome 瀏覽器上避免回車(chē)提交表單 
之前在論壇上發(fā)過(guò)一貼,問(wèn): 

"在chrome瀏覽器上 
我改變回車(chē)按鍵或者讓它無(wú)效也可以" 的問(wèn)題,終無(wú)解 

問(wèn)題當(dāng)時(shí)是為了避免回車(chē)提交表單引出的,現(xiàn)在這個(gè)問(wèn)題到是解決了,其實(shí)很簡(jiǎn)單,只怪自己沒(méi)想到 

在Form的提交事件上動(dòng)手腳: 

onsubmit=“MySubmit();return false;" 

MySubmit()可以用來(lái)做提交時(shí)的判斷，如可一用另一個(gè)隱藏的表單完成自定義的提交任務(wù)。 

這個(gè)問(wèn)題有點(diǎn)菜，但的在chrome上改變回車(chē)事件卻不好搞，有知情者還望告知。 

3 參考以前的文章
同時(shí)在IE和FF獲取KeyCode
以前一直在IE8中測(cè)試網(wǎng)站，后來(lái)寫(xiě)的一部分含有Ajax的代碼出現(xiàn)了故障，不得已下載了Firefox以及它的插件Firebug，才發(fā)現(xiàn)，F(xiàn)F不支持windows.event事件。于是換了一種思路。
HTML
<input type="password" name="psw" id="loginpsw" onkeypress="submit1(event)"/>
Javascript

復(fù)制代碼代碼如下:

 
function submit1(e){ 
var isie = (document.all) ? true : false;//判斷是IE內(nèi)核還是Mozilla 
var key; 
if (isie) 
key = window.event.keyCode;//IE使用windows.event事件 
else 
{ 
key = e.which;//3個(gè)按鍵函數(shù)有一個(gè)默認(rèn)的隱藏變量，這里用e來(lái)傳遞。e.which給出一個(gè)索引值給Mo內(nèi)核（注釋1） 
} 
if(key==13) 
send1('loginemail','loginpsw');//觸發(fā)的事件，可自定義 
} 

您可能感興趣的文章: