Home >Web Front-end >JS Tutorial >Form form submission processing method by pressing the Enter key

Form form submission processing method by pressing the Enter key

巴扎黑
巴扎黑Original
2016-11-25 14:29:471366browse

1. When there is only one eb083f4c4cf9f0984639e1904828905d in the form, pressing the Enter key will automatically submit the form.

Html code

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

Add another 4181d34c3a3ee326b7c38fff429306de pressing Enter will not automatically submit, but it is awkward to display an incomprehensible input box on the page. I later searched it on the Internet Two solutions:

 1; Add an 2640f15346b5065db09a810407d8935e do not display the input box, and then press enter and it will not be submitted:

Html code

<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; Add an onkeydown event, and then it will not be displayed after the carriage return:

Html code

<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>

If you want to add a carriage return event, you can add a judgment submission form in the onkeydown event:

Html code

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

Js code

//回车查询  
   function onKeyQuery(e){  
       if(window.event) // IE  
       {  
           keynum = e.keyCode  
       }  
       else if(e.which) // Netscape/Firefox/Opera  
       {  
           keynum = e.which  
       }  
       if(keynum == 13){  //等于13代表 回车键  
           //具体处理在这里  
       }  
   }

Sometimes we want to press the Enter key in the text box (input element) to submit the form (form), but sometimes we don’t want this. For example, for search behavior, you want to directly press the Enter key to submit the form immediately after entering the keywords. For some complex forms, you may want to avoid accidentally pressing the Enter key to trigger the form submission before completing the form filling.

To control these behaviors, there is no need to resort to JS. The browser has already done this for us. Here are a few rules:

If there is a button with type="submit" in the form, the Enter key will take effect.
If there is only one input with type="text" in the form, no matter what type the button is, the Enter key will take effect.
If the button is not input, but button, and no type is added, the default is type=button in IE and type=submit in FX.
Other form elements such as textarea and select will not be affected, and the radio checkbox will not affect the triggering rules, but it will respond to the enter key under FX but not under IE.
The input of type="image" has the same effect as type="submit". I don't know why such a type is designed. It is not recommended. It should be more appropriate to use CSS to add a background image.


Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn