日韩性视频-久久久蜜桃-www中文字幕-在线中文字幕av-亚洲欧美一区二区三区四区-撸久久-香蕉视频一区-久久无码精品丰满人妻-国产高潮av-激情福利社-日韩av网址大全-国产精品久久999-日本五十路在线-性欧美在线-久久99精品波多结衣一区-男女午夜免费视频-黑人极品ⅴideos精品欧美棵-人人妻人人澡人人爽精品欧美一区-日韩一区在线看-欧美a级在线免费观看

歡迎訪問 生活随笔!

生活随笔

當前位置: 首頁 > 编程资源 > 编程问答 >内容正文

编程问答

form表单回车提交问题

發布時間:2023/12/20 编程问答 19 豆豆
生活随笔 收集整理的這篇文章主要介紹了 form表单回车提交问题 小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

我們有時候希望回車鍵敲在文本框(input?element)里來提交表單(form),但有時候又不希望如此。比如搜索行為,希望輸入完關鍵詞之后直接按回車鍵立即提交表單,而有些復雜表單,可能要避免回車鍵誤操作在未完成表單填寫的時候就觸發了表單提交。

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

???1.?如果表單里有一個type=”submit”的按鈕,回車鍵生效。
???2.?如果表單里只有一個type=”text”input,不管按鈕是什么type,回車鍵生效。
???3.?如果按鈕不是用input,而是用button,并且沒有加typeIE下默認為type=buttonFX默認為type=submit
???4.?其他表單元素如textareaselect不影響,radio?checkbox不影響觸發規則,但本身在FX下會響應回車鍵,在IE下不響應。
???5.?type=”image”input,效果等同于type=”submit”,不知道為什么會設計這樣一種type,不推薦使用,應該用CSS添加背景圖合適些。

6.我們在處理表單的頁面可以檢驗他是否點擊了按鈕來控制下面的程序。if($_POST['submit']){?如果點擊了按鈕?程序繼續}

實際應用的時候,要讓表單響應回車鍵很容易,保證表單里有個type=”submit”的按鈕就行。而當只有一個文本框又不希望響應回車鍵怎么辦?呢?我的方法有點別扭,就是再寫一個無意義的文本框,隱藏起來。根據第3條規則,我們在用button的時候,盡量顯式聲明type以使瀏覽器表現一致。


通過以上可知只要把type="submit"改成type="button"然后js提交,?在不要有一個type=”text”input就行了。就不會發生回車跳轉。
但實驗發現,ie和火狐不一樣,火狐的submit按鈕有掩藏的(displayblock)和顯現的都不行,必須全改,但ie只要顯現的沒有submit就行了。

?

<!DOCTYPE html> <html> <head><meta charset="gb18030" /><meta http-equiv="Content-Type" content="text/html; charset=gb18030" /><title>HTML 5 gb18030編碼格式</title><script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script></head> <body><script type="text/javascript">function doSubmit() {alert("XXXXXXXXX");return false;}//監聽回車 /* $(document).ready(function() {$(document).keydown(function(e) {if (e.keyCode == 13) {alert("xxxxNX");}});<input type="submit" value="submit" />});*/</script><form onsubmit="return doSubmit();" method="post" action=""><input type="text" /> <input type="button" value="button" /><input type="text" style="display:none" value="此處的input刪掉然后回車按鈕就會觸發提交" /></form> </body> </html>

?本文是看了http://yuanyuan7891.iteye.com/blog/567532之后晚上回家實驗了總結的。感謝yuanyuan7891的博文的幫助。

?

?

?

如果這篇文章對您有幫助,您可以打賞我

?

轉載于:https://www.cnblogs.com/yeminglong/archive/2012/08/29/2662508.html

總結

以上是生活随笔為你收集整理的form表单回车提交问题的全部內容,希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯,歡迎將生活随笔推薦給好友。