New Revised CSS Library Forums Web Tools
FAQs Awards Usage Terms Contact
Categories
Other Sections
Sweet Ads
Compatibility
Bookmark online:


FF1+ IE5+ Opr7+

Disable "Enter" Key in Form script

Description: Is the user pressing the "Enter" key in the middle of your form causing inadvertent and incomplete form submissions? This script disable the "Enter" key when pressed inside chosen fields of your choice (most commonly <input type="text"> fields). Moreover, it then advances the cursor to the next field within the form. Very useful.

Demo: Try filling out the text fields below and pressing "Enter." Notice how instead of submitting the form, the cursor is instead advanced to the next field:

Name: 
Email:  
Your comments:


Directions: Developer's View

Step 1: Add the below script to the <HEAD> section of your page:

Select All

Step 2: Now, inside the form fields you wish to disable the "Enter" key and advance focus to the next field instead, simply add the below "onkeypress" event handler inside its tag as follows:

<form>
<input type="text" onkeypress="return handleEnter(this, event)"><br>
<input type="text" onkeypress="return handleEnter(this, event)"><br>
<textarea>Some text</textarea>
</form>
Note that you should not add this event handler inside <TEXTAREA>s, as it by default will jump to the next line within itself when "Enter" is pressed.