This document discusses client-side scripting issues related to the problem that hitting ENTER in a text input field in an HTML form has rather different effects on different browsers. For a fundamental discussion of the topic, see Submit form by hitting ENTER? by Alan Flavell. What we discuss here is attempts to prevent or trigger (depending on the nature of the form) such submission in some cases, to improve the situation for some users.
Note: This document was written when the main problem was Internet Explorer's behavior of submitting a form when hitting ENTER in a text input box. Unfortunately that behavior now appears e.g. in Opera 6 and Mozilla 1.0 too, and the method suggested here might not be effective against that.
Normally when you have a form with several text input fields, it is undesirable that the form gets submitted when the user hits ENTER in a field. People often do that by accident or because they are accustomed to terminate field input that way. If a browser (we are in practice discussing Internet Explorer here) regards hitting ENTER in a text input field as a request to submit the form immediately, there is no sure way to prevent that. But the author can help some users (namely those who have JavaScript enabled) by doing as follows:
<script type="text/javascript">
function noenter() {
return !(window.event && window.event.keyCode == 13); }
</script>
input type="text" tag(s) in your form:onkeypress="return noenter()"
This works simply so that if the user hits ENTER and
if that would trigger form submission on the browser, then (if JavaScript
is enabled) the onkeypress attribute causes form submission
to be aborted, since it executes a return statement
with value false.
Demonstration: On IE 4+, a form like the following would normally get submitted when the user hits ENTER in either text input field. But here we have added JavaScript as above to prevent that.
One might think that a simpler approach would work:
define a JavaScript variable, say submitOK, and initialize
it to false; use onsubmit="return submitOK"
in the form tag; and use onclick="submitOK=true"
in the submit button(s). However, this does not work. When
a user hits ENTER in a text input field, IE behaves
as if the submit button had been used! (You can see this if you add
e.g. alert('Hello world') into the code in the
onclick attribute.)
You might alternatively do something more complicated, so that hitting ENTER acts as tabbing, i.e. takes the user to the next field. This takes some more coding, and it might teach users bad habits - they would have problems with other pages if they accustomed to using ENTER for tabbing! - but here's a demo anyway (peek at the source code to see how it has been done):
Less frequently, we might wish to try to make ENTER in a text input field act as a submit request, on browsers where that does not normally happen. Remember that this cannot be guaranteed. You should thus always include a submit button anyway. (I have been reported that the method presented here does not work on a Linux version of Netscape. And naturally it cannot work when client-side scripting is disabled.)
As an example of a form where such behavior could make sense is the Google Advanced Search form. It can be convenient to just fill out one field and terminate it with enter, to send a query with other fields defaulted.
An obvious attempt is to modify our simple JavaScript code e.g. as follows:
function entsub(myform) {
if (window.event && window.event.keyCode == 13)
myform.submit();
else
return true;}
and use onkeypress="return entsub(this.form)" in the
input type="text" tags.
This however would be rather uninteresting, since it would basically
work only on IE 4+, which behaves by default the way we prefer here.
So this would be a case for considering the use
of Netscape-specific methods, since Netscape
is probably the main concern in this context.
Using the
event object, we would write the
entsub() function as follows:
function entsub(event,ourform) {
if (event && event.which == 13)
ourform.submit();
else
return true;}
and we would use the attribute
onkeypress="return entsub(event,this.form)"
in each input type="text" element. Demonstration:
This document is part of my material on HTML forms.
Date of last update: 2002-12-27. Minor modifications 2004-09-23 and 2006-09-25.
Jukka Korpela