首頁 >web前端 >js教程 >form表單按回車鍵提交處理方法

form表單按回車鍵提交處理方法

巴扎黑
巴扎黑原創
2016-11-25 14:29:471363瀏覽

1、當form表單中只有一個時按下回車鍵將會自動將表單提交。

Html代碼  

<form id=&#39;form1&#39; action=&#39;a1.jsp&#39; method=&#39;post&#39;>  
<input type=&#39;text&#39; name=&#39;name&#39; />  
</form>

 再增加一個按回車將不會自動提交,但是頁上顯示一個不知所雲的輸入框挺彆,後從網上搜到兩個解決方法:

  1;增加一個不顯示輸入框,然後回車之後也不會提交:

Html代碼  

<form id=&#39;form1&#39; action=&#39;a1.jsp&#39; method=&#39;post&#39;>  
<input type=&#39;text&#39; name=&#39;name&#39; />  
<input style=&#39;display:none&#39; />  
</form>

2; onkeydown事件,然後回車之後也不會顯示:

Html代碼  

<form id=&#39;form1&#39; action=&#39;a1.jsp&#39; method=&#39;post&#39;>  
<input type=&#39;text&#39; name=&#39;name&#39; onkeydown=&#39;if(event.keyCode==13) return false;&#39;/>  
</form>

 如果想新增回車事件可以在onkeydown事件中新增判斷提交表單:

Html

 我們有時候希望回車鍵敲在文字方塊(input element)裡來提交表單(form),但有時候又不希望如此。例如搜尋行為,希望輸入完關鍵字之後直接按回車鍵立即提交表單,而有些複雜表單,可能要避免回車鍵誤操作在未完成表單填寫的時候就觸發了表單提交。

要控制這些行為,不需要藉助JS,瀏覽器已經幫我們做了這些處理,這裡總結幾條規則:

如果表單裡有一個type=”submit”的按鈕,回車鍵生效。  

如果表單裡只有一個type=”text」的input,不管按鈕是什麼type,回車鍵都會生效。  

如果按鈕不是用input,而是用button,且沒有加type,IE下預設為type=button,FX預設為type=submit。  

其他表單元素如textarea、select不影響,radio checkbox不影響觸發規則,但本身在FX下會響應回車鍵,在IE下不響應。  
type=”image”的input,效果等同於type=”submit”,不知道為什麼會設計這樣一種type,不建議使用,應該用CSS添加背景圖合適些。



陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn