說說回車鍵觸發表單提交的問題

2022-02-27 17:01:59 字數 3949 閱讀 2351

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

1、如果表單裡有乙個type=」submit」的按鈕,回車鍵生效。

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

3、如果按鈕不是用input,而是用button,並且沒有加type,ie下預設為type=button,fx預設為type=submit。

4、其他表單元素如textarea、select不影響,radio checkbox不影響觸發規則,但本身在fx下會響應回車鍵,在ie下不響應。

5、type=」image」的input,效果等同於type=」submit」,不知道為什麼會設計這樣一種type,不推薦使用,應該用css新增背景圖合適些。

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

做了乙個demo列出了一些例子:

>submit例子 - aspxhome.com

title

>

6head

>

7<

body

>

8<

h1>本demo演示在文字框中按enter鍵是否觸發提交表單

h1>

9<

h2>預設情況下,乙個文字框的時候,提交,不管按鈕type是submit還是button

h2>

10<

form 

action

="">

11<

input 

type

="text"

>

12<

input 

type

="button"

value

="提交"

>

13form

>

14<

h2>乙個文字框的時候怎麼才能做到不提交,方法是加乙個隱藏掉的文字框

h2>

15<

form 

action

="">

16<

input 

type

="text"

>

17<

input 

type

="text"

style

="display:none"

>

18<

input 

type

="button"

value

="提交"

>

19form

>

20<

h2>只要有type為submit的按鈕存在,乙個文字框還是多個文字框都提交

h2>

21<

form 

action

="">

22<

input 

type

="text"

>

23<

input 

type

="submit"

value

="提交"

>

24form

>

25<

h2>只要有type為submit的按鈕存在,乙個文字框還是多個文字框都提交

h2>

26<

form 

action

="">

27<

input 

type

="text"

>

28<

input 

type

="text"

>

29<

input 

type

="submit"

value

="提交"

>

30form

>

31<

h2>多個文字框的時候,不提交,用type為button的按鈕就行啦

h2>

32<

form 

action

="">

33<

input 

type

="text"

>

34<

input 

type

="text"

>

35<

input 

type

="button"

value

="提交"

>

36form

>

37<

h2>用button元素時,fx和ie下有不同的表現

h2>

38<

form 

action

="">

39<

input 

type

="text"

>

40<

input 

type

="text"

>

41<

button

>提交

button

>

42form

>

43<

h2>radio和checkbox在fx下也會觸發提交表單,在ie下不會

h2>

44<

form 

action

="">

45<

input 

type

="text"

>

46<

input 

type

="radio"

name

="a"

>

47<

input 

type

="checkbox"

name

="b"

>

48<

input 

type

="checkbox"

name

="c"

>

49<

input 

type

="button"

value

="提交"

>

50form

>

51<

h2>type為image的按鈕,等同於type為submit的效果

h2>

52<

form 

action

="">

53<

input 

type

="text"

>

54<

input 

type

="text"

>

55<

input 

type

="image"

src="/images/logo.gif"

>

56form

>

57body

>

58html

>

回車鍵觸發表單提交的問題

要控制這些行為,不需要借助js,瀏覽器已經幫我們做了這些處理,這裡總結幾條規則 1 如果表單裡有乙個type submit 的按鈕,回車鍵生效。2 如果表單裡只有乙個type text 的input,不管按鈕是什麼type,回車鍵生效。3 如果按鈕不是用input,而是用button,並且沒有加ty...

回車鍵觸發表單提交的問題

本文 要控制這些行為,不需要借助js,瀏覽器已經幫我們做了這些處理,這裡總結幾條規則 如果表單裡有乙個type submit 的按鈕,回車鍵生效。如果表單裡只有乙個type text 的input,不管按鈕是什麼type,回車鍵生效。如果按鈕不是用input,而是用button,並且沒有加type,...

回車鍵的使用

在vc中建立一基於對話方塊的工程,編譯執行,成功。面對著剛剛建立的工程,心裡那個高興呀。突然一時心血來潮,按了個回車鍵,工程一閃而過沒了。再編譯執行,成功。按了個esc鍵,工程一閃而過也沒了。為什麼會這樣,因為cdialog 中有預設對enter和esc鍵的處理。解決這種一按回車和esc鍵就關閉工程...