JavaScript and DHTML Cookbook, from O'Reilly. Chapter 8 Dynamic Forms | 10

JavaScript & DHTML Cookbook, Chapter 8: Dynamic Forms

[The following is the conclusion of our series of excerpts from Chapter 8 of the O'Reilly title, JavaScript & DHTML Cookbook.]

Blocking Submissions from the Enter Key

NN 4(only) IE 4

Problem

You want to prevent a press of the Enter/Return key from submitting the form.

Solution

The default behavior of most browsers (but this is not specified in any HTML standard) is that a form consisting of a single text input element submits the form when the field has focus and the user presses the Enter/Return key. Although it is a convenience for some forms, it may prematurely submit a form that has other kinds of elements that need attention.

Use the keyboard event models and the onkeydown event handler of the text box to ignore the Enter/Return key:

function blockEnter(evt) {
    evt = (evt) ? evt : event;
    var charCode = (evt.charCode) ? evt.charCode :
        ((evt.which) ? evt.which : evt.keyCode);
    if (charCode =  = 13 || charCode =  = 3) {
        return false;
    } else {
        return true;
    }
}
...
<input type="text" name="search" size="40" onkeydown="return blockEnter(event)" />

Unfortunately, the onkeydown event is broken in Netscape 6 and 7, so this solution does not work in those browsers.

Discussion

Both the character code and key code for the Enter/Return key above the right Shift key is 13. Macintosh keyboards also have a separate Enter key whose character code is 3 and whose behavior mimics the Return key for forms. Submission occurs with the onkeydown event, so this is the event to block for the relevant keys. IE for Macintosh behaves a little differently: a press of the Enter key (called Return on Mac keyboards) submits the form regardless of how many text fields are in the form. Therefore, if you want to impede submission by Enter key for all browsers, include the event handler in all text-type input elements.

If you are using a form simply as a container of controls for client-side entry and manipulation (e.g., a mortgage payment calculator), you don't want the form to be submitted at all. The best way to block all submission possibilities of the form is to short-circuit the onsubmit event handler of the form:

<form ... onsubmit="return false">

This leads to a potential workaround for the lack of Netscape 6 and 7 support for the onkeydown event to block submissions. If you provide a button or link that is used to submit the form, it can invoke the form's submit( ) method, which does not trigger an onsubmit event. Therefore, block all submissions via the onsubmit event handler, and then use a script to submit the form:

<input type="button" value="Submit" onclick="this.form.submit(  )" />

This will keep all Enter keystrokes at bay, but still allow submissions through the user interface path you desire. You can also continue to use batch validation of the form, even with the onsubmit event handler blocked. Instead, invoke the batch validation function from the onclick event handler prior to submitting the form:

<input type="button" value="Submit" 
onclick="if (validateForm(this.form)) {this.form.submit(  )}" />