| home / programming / java_dhtml / chap8 / 2 |    [previous] [next] |
|
|
|
NN 4 IE 4
You want to use the Enter/Return key in a text field to give focus to the next text field in the form.
Include an onkeypress event handler
in each field that needs to advance focus to another field in the form. The
event handler should invoke the focusNext( ) function
described in the Discussion. The event handler must pass arguments for the form
reference, the name of the next field in sequence, and (for the W3C event model
in NN) the event object. For example, the event handler in a field called name1
directs focus to field name2 in the following:
<input type="text" name="name1" id="name1"onkeypress="return focusNext(this.form, 'name2', event)">
Although HTML forms don't normally follow the user interface behavior
of standalone database form programs, you can script text input fields to advance
focus to the next field when the user presses the Enter/Return key. The scripting
task is a bit tedious because each event handler must be tailored to focus a
specific field that is next in the sequence. First, block all submissions using
onsubmit="return false"
in the <form> tag. The following function
is invoked from each text field:
function focusNext(form, elemName, evt) {evt = (evt) ? evt : event;var charCode = (evt.charCode) ? evt.charCode :((evt.which) ? evt.which : evt.keyCode);if (charCode = = 13 || charCode = = 3) {form.elements[elemName].focus( );return false;}return true;}
Continue to use the onchange event
handlers in the text boxes to perform real-time validations as well as the auto-focusing
via onkeypress.
Recipe 8.12 for automatically advancing focus to an adjacent text box in fixed-length fields.
NN 4 IE 4
You want a press of the Return/Enter key in one or more text fields to submit the form.
To simulate a standalone database entry form, you might implement
the auto-focusing technique in Recipe 8.6 for all but the last test box, which
instead uses the onkeypress event handler to invoke
the following function:
function submitViaEnter(evt) {evt = (evt) ? evt : event;var target = (evt.target) ? evt.target : evt.srcElement;var form = target.form;var charCode = (evt.charCode) ? evt.charCode :((evt.which) ? evt.which : evt.keyCode);if (charCode = = 13 || charCode = = 3) {if (validateForm(form)) {form.submit( );return false;}}return true;}
Omit the onchange event handler that
performs real-time validation. The above function triggers the batch validation
(which alerts the user to any problems in the last field) and submits the form
via the submit( ) method. The event handler of
the last field of the form looks like the following:
onkeypress="return submitViaEnter(event)"
This technique also assumes that the form
element has the onsubmit="return false"
event handler in place so that only the scripted submit(
) method submits the form (as discussed in Recipe 8.6).
To help summarize some of the form enhancements described in Recipes 8.6 and 8.7, as well as this recipe, the following text field form incorporates event handlers that invoke several functions described earlier in this chapter. Guiding the design of this form are requirements that the Return key advance focus to the next text field until the last field is reached, where Return submits the form:
<form action="..." method="GET" name="sampleForm" onsubmit="return false">First Name: <input type="text" size="30" name="name1" id="name1"onkeypress="return focusNext(this.form, 'name2', event)"onchange="isNotEmpty(this)" /><br>Last Name: <input type="text" size="30" name="name2" id="name2"onkeypress="return focusNext(this.form, 'eMail', event)"onchange="isNotEmpty(this)" /><br>Email Address: <input type="text" size="30" name="eMail" id="eMail"onkeypress="return submitViaEnter(event)" /><br><input type="reset" /> <input type="button" value="Submit"onclick="if (validateForm(this.form)) {this.form.submit( )}" /></form>
Notice that the Submit button is a regular button-type
input element. This prevents nonscriptable browsers
from submitting the form. If you'd like nonscriptable browsers to be able to
submit the form (presumably to let server-side validation catch any errors),
use a modified submit-type input
element as follows:
<input type="submit" onclick="if (validateForm(this.form)) {this.form.submit( )}" />
For scripted browsers, the default action of the submit-type
input element is cancelled by the form's onsubmit
event handler, but nonscriptable browsers will submit the form like an ordinary
form.
Recipe 8.6 for blocking unintended form submission through the press of the Return/Enter key; Recipe 8.7 for using the Enter key to advance focus to the next field in sequence.
| home / programming / java_dhtml / chap8 / 2 | [previous] [next] |
Legal Notices, Licensing, Permissions, Privacy Policy.
Advertise | Newsletters | Shopping | E-mail Offers | Freelance Jobs 
Created: March 27, 2003
Revised: May 6, 2003
URL: http://webreference.com/programming/java_dhtml/chap8/2
