Can anyone explain this behavior? Pressing the Enter key in an HTML form's text box submits the form when the form contains a single text box, but not when the form contains two or more text boxes.
jsFiddle (one input): http://jsfiddle.net/gpPTa/
jsFiddle (two inputs): http://jsfiddle.net/fDbJt/
Unfortunately it's a default for the form to submit on enter with only one input.
You can either give each of them an javascript command that submits the form, or place a submit button with width: 0 and/or visibility: none.
For example:
<form>
<input style='width:0; visibility:hidden' type='submit'>
<input>
<input>
</form>
It seems that the browser assumes that since there is only one input, it is also the submit control. Focusing on it and pressing enter will submit the form, the same way as focusing on a submit button will behave.
When you add type="submit" to one of the <inputs>, you can use as many others as you like and the form will be submitted by pressing enter.
I don't have any references to back this up, but it seems logical to me.
Related
I have a form with some text input fields (let's say FirstName and LastName to keep it simple) and then a submit input field at the bottom of the form (with a value of Sign In)
When I type something in one of the text fields (such as typing John for the FirstName) and then press Enter on the keyboard, it automatically triggers the submit input field, as if I have actually clicked the Sign In button.
I understand the reason why it is doing this, however I need to find a work around so that if Enter is pressed, I can carry on typing in the rest of my form. I don't want the form to actually be submitted until someone clicks Sign In.
I have read a suggestion such as changing <input type="submit" value="Sign In">to <input type="button" value="Sign In"> instead, however if I do this it then makes the button un-clickable, and doesn't actually 'submit' the form.
Any suggestions?
I haven't included my code because I didn't feel it was necessary, as I'm sure there's a really simple solution I'm completely missing.. but if I really need to paste my code I can.. thanks.
Inline HTML:
<form onkeypress="return event.keyCode != 13;" ...>
...
</form>
That works by disabling the enter key for the entire form. (take note that this will stop you from making newlines in textareas)
Source
You can not for the input "text" but you can for input "area" because area input is not fixed.
In my web page: which is a jsp file
I have an input text, I type a text in it then I press enter an error occurs:
javax.servlet.ServletException: Request[/myAction] does not contain handler parameter named 'method'. This may be caused by whitespace in the label
text.
What can be the cause?
If you hit enter in one of the text inputs, browsers will act like the first button on the form was pressed & IE will not send any button related information to the server.
To avoid it all and make one input act just like multiple inputs, just add a 'hidden' text input
<input type="text" style="display: none" />
This input will force IE to act like the first button on the page was clicked when enter is pressed on this form.
For further info, go to Click here
When I have a submit button, it sends the form when I press enter.
Is the submit button necessary?
I am thinking of removing the button if it is unnecessary.
You need the submit button, otherwise the input is just an input.
Of course, you could use some javascript to force the submission, either onblur (when the input loses focus) or when the enter key is pressed.
However, I think this is a very bad idea from a user experience point of view. People expect a submit button.
Here is another SO answer with some suggestions:
Submitting a form by pressing enter without a submit button
In a <form>, one can submit by pressing the Enter key when you have a text input but hide your submit button.
<form action="wherever">
<input type="text" name="input" />
<input type="submit" value="Submit" name="submit" style="display: none;" />
</form>
This type of buttonless interface may be useful in interfaces like a command prompt, but generally, users often recognize a form with a submit button.
I have a form with some
<button>
elements and a normal
<input type="submit">
button to submit the form.
However, when I press Enter when I'm in a textfield, the form does not get submitted but much rather the first Element is "pressed".
How can I change this behavior?
I would recommend changing the <button> tag and turning it into an <input type="button" /> tag. This should force the form to submit the way you want.
You can use javascript to capture that the Enter key was pressed and submit the form.
See this example.
For a complete answer, could you please post your HTML?
This bug/feature cropped up in one of my pages when viewed in google chrome so i wrote a test page which looks like this
<body>
<form action="loginhandler.php">
<input type="text" id="name">
<input type="text" id="lastname">
<input type="button" value="Login">
</form>
</body>
Here you can see, the input type is NOT of type submit. So if you press ENTER KEY on IE,Firefox,Opera, nothing happens and that is the expected behavior.
But if you press enter on chrome, it SUBMITS regardless of whether the input type is submit or not.
My question , is this a default feature/bug of chrome or am i doing something wrong here. ?
To cite section 4.10.21.2 of the HTML5 specification:
"If the form has no submit button,
then the implicit submission mechanism
must just submit the form element from
the form element itself."the form element itself."
Therefore I believe Chrome's behaviour to be correct, although I think other browsers do this as well. You can catch/block/process form submission by listening to the "submit" (e.g. to block it) event.BlockquoteBlockquotethe form element itself."
Not even Chrome, most of browsers submit once you press enter (even there is not submit button) when cursor in input.
I have the opposite problem. I use custom js-element for my form and when i use style='dispay:none;' for the submit button, chrome does not submit form on enter, although, firefox does :(