When there is only one input text in an FORM form in JSP pressing Enter will automatically submit the form

  • 2021-11-13 08:38:39
  • OfStack

1 list interface only 1 input box query conditions, when the first entry in the input box input Chinese characters, press Enter found that the input box Chinese characters become garbled! I thought it was a simple question, but it took me a long time to find out the reason (it is said that it was a browser problem). After pressing Enter, I executed two queries.

1. Code before modification:


<form id="ff" name="ff" method="post"> 
  <input type="text" id="userName" name="userName" size="12" maxlength='30' value="${(data.userName)!''}" onKeypress= "javascript:if(event.keyCode==13) do_postAuditList_search();"/> 
</form> 

2. Modified code:


<form id="ff" name="ff" method="post"> 
  <input type="text" id="userName" name="userName" size="12" maxlength='30' value="${(data.userName)!''}" onKeypress= "javascript:if(event.keyCode==13) do_postAuditList_search();"/> 
 <!-- Solve form Form in only 1 A input Enter will automatically submit the form when entering the box --> 
 <input style='display:none' /> 
</form>

That is, add 1 <input type='text' style='display:none'/> The input box is not displayed, and then it will not be submitted after entering the car.

Supplement:

There are two possibilities for automatic submission:

1 is to write javascript code, when the user clicks Enter key, through js event listening mechanism to touch the submission of the list.

2 is to take advantage of the browser's default behavior (at least ie is found to be like this). Browsers have many default behaviors when parsing web pages. For example, if there is a form and a submit button on a page, the focus will automatically fall on the submit button when the page is opened. Similarly, if there is only one single-line text input field (text) in a form, the browser will automatically submit the form when the Enter key is pressed in this input field.

We all know and understand the first case, but for the second browser's default behavior, few people may know this point. Let me look at the default behavior of browser 1 (at least ie) on form submission.
If a form contains a single-line text input field, the form is automatically submitted when you click Enter in that input field, no matter how many other types of form components it contains. For example, the following code:


<form action="" method="post">
<input type="text" name="sdfsdf"/>
<textarea></textarea>
<input type="checkbox">sdfsdf
<input type="hidden" name="aa"/>
</form>

If a form contains two or more single-line text input fields, pressing Enter does not automatically submit, regardless of whether it contains other types of form components, such as:


<form action="" method="post">
<input type="text" name="sdfsdf"/>
<input type="text" name="sddf"/></form>

The method is very simple. We already have the example above. Just add another text input box. Maybe you will say that in order not to submit automatically, you need to add a useless input box, and there are two input boxes in it. Will the end user accept it? In fact, it can be solved. You can hide the newly added input box through style, for example:


<form action="" method="post">
<input type="text" name="notautosubmit" style="display:none"/>
<input type="text" name="username"/>
</form>

There is also a way to bind the button button enter trigger event:


document.onkeypress = function(){
if(event.keyCode == 13) {
search();
return false;
}
}

Where the search method is an onclick event: <form name="searchfrom">


Related articles: