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

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

巴扎黑
發布: 2016-11-25 14:29:47
原創
1357 人瀏覽過

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添加背景圖合適些。



相關標籤:
js
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
最新問題
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板