For example, search behavior, you want to enter the keyword immediately after the press return directly to submit the form, and some complex forms, you may want to avoid the return key error operation in the unfinished form filled out when it triggered the form submission.
To control these behaviors, no need to use JS, the browser has helped us do these processing, here summed up a few rules:
If there is a type= "submit" button in the form, the ENTER key takes effect.
If there is only one type= "text" Input in the form, the ENTER key takes effect, regardless of the type of the button.
If the button is not used with input, it is type,ie with a button, and the default is TYPE=BUTTON,FX defaults to Type=submit.
Other form elements such as textarea, select Do not affect, radio checkbox does not affect the trigger rule, but itself in the FX will respond to enter, under IE does not respond.
Type= "image" input, the effect is equivalent to type= "submit", do not know why the design of such a type, not recommended, you should use CSS to add a background map appropriate.
In practical applications, it is easy to make the form respond to the ENTER key, ensuring that there is a type= "submit" button on the form. And what happens when you have only one text box and don't want to respond to enter? My method is a little awkward, is to write a meaningless text box, hidden. According to rule 3rd, when we use a button, we try to explicitly declare the type so that the browser behaves in a consistent way.
A demo (click to view) lists some examples.
<! DOCTYPE HTML PUBLIC "-//w3c//dtd HTML 4.01//en" "HTTP://WWW.W3.ORG/TR/HTML4/STRICT.DTD" > <ptml> <pead> <meta http-equiv= "Content-type" content= "text/html; CHARSET=GBK "> <title>submit</title> </pead> <body> <p>" This demo demonstrates pressing ENTER in a text box to touch Submit a form </p> <p> by default, a text box is submitted, regardless of button type is submit or button</p> <form action= "http://www.jb51 . net/search.asp "> <input type=" text "> <input type=" button "value=" Submit "> </form> <p> a text box how to do not submit, the method is to add a hidden text box </p> <form action= "http://www.jb51.net/search.asp" > <input type= "text" > <input type= "text" > <input type= "button" value= "Submit" > ;/form> <p> As long as there is a button with type submit, a text box or multiple text boxes are submitted </p> <form action= "Http://www.jb51.net/search. ASP "> <input type=" text "> <input type=" Submit "value= "Submit" > </form> <p> as long as there is a button with type submit, a text box or multiple text boxes are submitted </p> <form action= "Http://ww W.jb51.net/search.asp "> <input type=" text "> <input type=" text "> <input type=" Submit "value=" > </form> <p> multiple text boxes, do not submit, with type button buttons on the line </p> <form action= " Http://www.jb51.net/search.asp "> <input type=" text "> <input type=" text "> <inp UT type= "button" value= "Submit" > </form> <p> with button elements, FX and IE have different performance </p> <form action= "Http://www.jb51.net/search.asp" > <input type= "text" > <input type= "text" > <bu tton> Submit </button> </form> <p>radio and checkbox under FX will also trigger the Submit form, under IE will not </p> <form Act ion= "http://www.jb51.net/search.asp" > <input type= "text" > <input type= "Radio" Name= "a" > <input type= "CheckBox "Name=" B "> <input type=" checkbox "Name=" C "> <input type=" button "value=" Submit "> </form> <p>type is the button with image equivalent to the effect of type for submit </p> <form action= "Http://www.jb51.net/search . asp "> <input type=" text "> <input type=" text "> <input type=" image "src=" yun_q I_img/logo.gif "> </form> </body> </ptml>
[Ctrl + A All SELECT Note: If the need to introduce external JS need to refresh to perform]
