JSP中的FORM表單中只有一個(gè)input文本時(shí)，按回車(chē)鍵將會(huì)自動(dòng)提交表單

一個(gè)列表界面只有一個(gè)輸入框查詢(xún)條件，當(dāng)首次進(jìn)入在輸入框中輸入漢字后，按回車(chē)鍵發(fā)現(xiàn)輸入框中漢字變成亂碼！本以為一個(gè)很簡(jiǎn)單不過(guò)的問(wèn)題，結(jié)果卻花了好久才找到原因（據(jù)說(shuō)是瀏覽器問(wèn)題），按回車(chē)后執(zhí)行了兩次查詢(xún)。

1、未修改前代碼：

form id="ff" name="ff" method="post"> 
  input type="text" id="userName" name="userName" size="12" maxlength='30' value="${(data.userName)!''}" onKeypress= "javascript:if(event.keyCode==13) do_postAuditList_search();"/> 
/form> 

2、修改后代碼：

form id="ff" name="ff" method="post"> 
  input type="text" id="userName" name="userName" size="12" maxlength='30' value="${(data.userName)!''}" onKeypress= "javascript:if(event.keyCode==13) do_postAuditList_search();"/> 
 !--解決form表單在只有一個(gè)input輸入框時(shí)回車(chē)會(huì)自動(dòng)提交表單--> 
 input style='display:none' /> 
/form>

即：添加一個(gè)input type='text' style='display:none'/>不顯示輸入框，然后回車(chē)之后也不會(huì)提交。

補(bǔ)允：

出現(xiàn)自動(dòng)提交的情況，有兩種可能：

一是編寫(xiě)了javascript代碼，當(dāng)用戶(hù)點(diǎn)按Enter鍵時(shí)，通過(guò)js事件偵聽(tīng)機(jī)制觸發(fā)表單的提交。

二是利用了瀏覽器的默認(rèn)行為（至少發(fā)現(xiàn)ie是這樣的）。瀏覽器在解析網(wǎng)頁(yè)的時(shí)候，有許多默認(rèn)的行為，例如如果一個(gè)頁(yè)面上有表單和一個(gè)提交按鈕，那么打開(kāi)頁(yè)面時(shí)，焦點(diǎn)會(huì)自動(dòng)落在這個(gè)提交按鈕上面。同樣如果一個(gè)表單中只有一個(gè)單行文本輸入域（text），那么在這個(gè)輸入域中按Enter鍵時(shí)，瀏覽器會(huì)自動(dòng)提交該表單。

我們對(duì)于第一種情況一般都知道而且很容易理解，但是對(duì)于第二種瀏覽器的默認(rèn)行為，可能知道這一點(diǎn)的人就比較少了，下面我具體看一下瀏覽器（至少ie如此）在表單提交上的默認(rèn)行為。
如果表單中含有一個(gè)單行文本輸入域，那么無(wú)論含有多少其他類(lèi)型的表單組件，那么在該輸入域中點(diǎn)擊Enter時(shí)，表單會(huì)自動(dòng)提交。例如下面的代碼：

form action="" method="post">
input type="text" name="sdfsdf"/>
textarea>/textarea>
input type="checkbox">sdfsdf
input type="hidden" name="aa"/>
/form>

如果表單中含有兩個(gè)或多個(gè)單行文本輸入域，那么無(wú)論是否含有其他類(lèi)型的表單組件，按Enter鍵時(shí)不會(huì)自動(dòng)提交，例如：

form action="" method="post">
input type="text" name="sdfsdf"/>
input type="text" name="sddf"/>/form>

辦法很簡(jiǎn)單，我們上面舉的例子中已經(jīng)有了，只要再添加一個(gè)文本輸入框就可以了，可能你會(huì)說(shuō)，為了不自動(dòng)提交就要增加一個(gè)沒(méi)有用的輸入框，而且中含有兩個(gè)輸入框最終用戶(hù)會(huì)接受嗎？其實(shí)可以解決，你可以將那個(gè)新添加的輸入框通過(guò)style隱藏即可，例如：

form action="" method="post">
input type="text" name="notautosubmit" style="display:none"/>
input type="text" name="username"/>
/form>

還有一個(gè)方法可以綁定button按鈕 enter觸發(fā)事件：

document.onkeypress = function(){
if(event.keyCode == 13) {
search();
return false;
}
}

其中search方法是onclick事件：form name="searchfrom">