Why does forms with single input field submit upon

2019-01-01 15:35发布

站内文章 / JavaScript
32 0 0

问题:

Why is it that a <form> with a single <input> field will reload the form when the user enters a value and presses the Enter, and it does not if there are 2 or more fields in the <form>?.

I wrote a simple page to test this oddity.

If you enter a value in the second form and press Enter, you\'ll see it reloads the page passing the entered value as if you called GET. why? and how do I avoid it?

<!DOCTYPE html PUBLIC \"-//W3C//DTD XHTML 1.0 Transitional//EN\" \"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd\">
<html xmlns=\"http://www.w3.org/1999/xhtml\">
<head>
<meta http-equiv=\"Content-Type\" content=\"text/html; charset=utf-8\" />
<title>testFormEnter</title>
</head>
<body>
<form>
  <input type=\"text\" name=\"partid2\" id=\"partid2\" />
  <input type=\"text\" name=\"partdesc\" id=\"partdesc\"  />
</form>
  <p>2 field form works fine</p>
<form>
<input type=\"text\" name=\"partid\" id=\"partid\"  />
</form>
<p>One field form reloads page when you press the Enter key why</p>
</body>
</html>

回答1:

This is a little known \"Quirk\" that has been out for a while. I know some people have resolved it in various ways.

The easiest bypass in my opinion is to simply have a second input that isn\'t displayed to the user. Granted not all that user friendly on the backend, it does work to resolve the issue.

I should note that the most common place that I hear of this issue is with IE specifically and not with FireFox or others. Although it does seem to affect them as well.



回答2:

This is a known bug in IE6/7/8. It doesn\'t appear that you will get a fix for it.

The best workaround you can do for this, is to add another hidden field (if your engineering conscience permits). IE will no longer auto-submit a form when it finds that there are two input-type fields in the form.

Update

In case you were wondering why this is the case, this gem comes straight out of the HTML 2.0 specification (Section 8.2):

When there is only one single-line text input field in a form, the user agent should accept Enter in that field as a request to submit the form.



回答3:

Pressing Enter works differently depending on (a) how many fields there are and (b) how many submit buttons there are. It may do nothing, it may submit the form with no \'successful\' submit button, or it may pretend the first submit button was clicked (even generating an onclick for it!) and submit with that button\'s value.

For example, if you add an input type=\"submit\" to your two-field form, you\'ll notice it too submits.

This is an ancient browser quirk going back at least as far as early Netscape (maybe further), which is unlikely to be changed now.

<form>

Invalid without an ‘action’. If you don\'t intend to submit anywhere, and you don\'t need radio button name grouping, you could just completely omit the form element.



回答4:

Here is the code that I used would use to solve the problem:

<form>
<input type=\"text\" name=\"partid\" id=\"partid\"  />
<input type=\"text\" name=\"StackOverflow1370021\" value=\"Fix IE bug\" style=\"{display:none}\" />
</form>


回答5:

No, the default behaviour is that on enter, last input in the form is submitted. If you don\'t want to submit at all you could add:

<form onsubmit=\"return false;\">

Or in your input 

<input ... onkeypress=\"return event.keyCode != 13;\">

Of course there are more beautiful solutions but these are simpler without any library or framework.



回答6:

It\'s not reloading the page as such, it\'s submitting the form.

However, in this example because you have no action attribute on the form it submits to itself which gives the impression of reloading the page.

Also, I can\'t repro the behaviour you describe. If I am in any text input in a form and I press Enter it submits the form, no matter where in the form the input is located or how many inputs there are.

You might want to try this out some more in different browsers.



回答7:

as vineet already said, this is rooted in the html 2.0 specification:

here is how to prevent this from happening without screwing up your urls:

<form>
    <input type=\"text\" name=\"partid\" id=\"partid\"  />
    <input type=\"text\" style=\"display: none;\" />
</form>


回答8:

Thanks to everyone who answered. It\'s an eye opener that a form with a single field acts differently then a form with many fields.

Another way to deal with this automatic submit, is to code a submit function that returns false.

In my case I had a button with an onclick event, so I moved the function call with the added return keyword to the onsubmit event. If the function called returns false the submit won\'t happen.

<form onsubmit=\"return ajaxMagic()\">
<input type=\"text\" name=\"partid\" id=\"partid\"  />
<input type=\"submit\" value=\"Find Part\" />
</form

function ajaxMagic() {
  ...
  return (false);
}


回答9:

The solution I found for all of the browsers that I tested (IE, FF, Chrome, Safari, Opera) is that the first input type=submit element on the form has to be visible and has to be the first element in the form. I was able to use CSS placement to move the submit button to the bottom of the page and it did not affect the results!

<form id=\"form\" action=\"/\">
<input type=\"submit\" value=\"ensures-the-enter-key-submits-the-form\"
                      style=\"width:1px;height:1px;position:fixed;bottom:1px;\"/>
<div id=\"header\" class=\"header\"></div>
<div id=\"feedbackMessages\" class=\"feedbackPanel\"></div>
     ...... lots of other input tags, etc...
</form>


回答10:

This problem occurs in both IE and Chrome. It does not occur on Firefox. A simple solution would be to add the following attribute to the form tag: onsubmit=\"return false\"

That is, of course, assuming that you submit the form using an XMLHttpRequest object.



回答11:

Yes, form with a single inputText field working as different in HTML 4.
onSubmit return false not working for me but the below fix bug is working fine

<!--Fix  IE6/7/8 and  HTML 4 bug -->
    <input style=\"display:none;\" type=\"text\" name=\"StackOverflow1370021\" value=\"Fix IE bug\" />


回答12:

I handled this by the following code but I am not sure if this a good approach. By looking for input fields in a given form and if its 1 prevent the default action.

 if($j(\"form#your-form input[type=\'text\']\").length == 1) {
   $j(this).bind(\"keypress\", function(event) {
     if(event.which == 13) {
       event.preventDefault();
     }
   });
 }


回答13:

I think that\'s a feature, which I did also disable it though. It\'s not taking big effort to disable it. Just capture the enter key, ignore it, will do.



标签： javascript html forms
举报

收藏的人(0)

Ta的文章 更多文章
登录 后发表评论
0条评论
还没有人评论过~