Detecting Carriage Return / Enter Key Presses in Text Fields and Textareas
Detecting an enter/return key press within a text input or textarea is a common scripting task when it comes to handling user interaction within forms. The ability to detect this particular keyboard event allows a form to be submitted - or not submitted - when the enter key (PC) or return key (Mac) is pressed. While the subject entails complex Event Object concepts and many cross browser issues, it is possible to handle these scenarios fairly painlessly.

Forcing Form Submission via Enter/Return Key Press
Press Enter from any field to force submission.

By default, forms are submitted by pressing the Enter/Return key from within an input type text field, when it is the only text field in the form. This can a good thing because it can save the action of having to click the mouse button to submit a form, and it can be a bad thing if submitting the form is not intended, and proper validation scripting has not been implemented. Of course, you all have no excuse for not using form validation any longer!

Because of that default action of old, users as well as scripters have been confused as to why sometimes a form submits with an enter key press and sometimes it does not. That confusion can be cleared up by scripting your forms to submit -or not submit- consistently.

Whether you want to force a submission from any number of text fields your form may contain, or suppress the default submission when your form has only one text field, the technique used to detect an enter/return key press is the same. We'll start with a forced submission. The following function will give any text input that invokes it via onKeyPress the ability to submit the form when the enter key is pressed, even if it is one of many text inputs in the form.

function checkEnter(e){ //e is event object passed from function invocation
var characterCode  literal character code will be stored in this variable

	 if(e && e.which){ //if which property of event object is supported (NN4)
	 e = e
	 characterCode = e.which //character code is contained in NN4's which property
	 }
	 else{							
	 e = event						
	 characterCode = e.keyCode //character code is contained in IE's keyCode property
	 }
	 
	 
	 if(characterCode == 13){ //if generated character code is equal to ascii 13 (if enter key)
	 document.forms[0].submit() //submit the form
	 return false 
	 }
	 else{
	 return true 
	 }

}


<input type="text" onKeyPress="checkEnter(event)">  
<!-- don't forget to pass the event to the function for NN4 -->

Suppressing Form Submission via Enter/Return Key Press From within Single Text Input
Press Enter from within text input to see suppressed submission.

To suppress form submission when the enter key is pressed from within your form's single text input, the above function will do the trick with only a couple of changes. First, remove the submit statement from the function. Browsers default to submit in this scenario, so that statement is redundant. The last if statement now looks like this:

	 if(characterCode == 13){ //if character code is equal to ascii 13 (if enter key)
	 return false //return false to the event handler
	 }
	 else{
	 return true //return true to the event handler
	 }

Then add the return keyword to the single text input's onKeyPress handler preceding the function call:

<input type="text" onKeyPress="return checkEnter(event)">  
<!-- when enter key is pressed, false value is returned to the browser, disallowing submission-->

Key Codes Vs. Character Codes, and How Browsers Obtain Them
Key codes and character codes are both generated by keyboard events. Both are properties of the event object, which is referenced differently from NN4 to IE4+, and depending on the browser, are contained in either one or two event object properties.

A key code is a code that is generated when any PC keyboard key is pressed. A character code is generated only when alphanumeric keys such as letters, numbers, and the enter key are pressed, and represents the character generated by the key. A character code will differentiate between an uppercase "A" and a lowercase "a", while a key code will not.

Key codes can be obtained from IE through only the onKeyDown and onKeyUp events, while character codes are obtained from IE through only the onKeyPress event. To confuse matters, both character codes and key codes are stored in IE's keyCode property which is contained in its event object. NN4.x's which property contains both key and character codes and can be obtained through all 3 event handlers. NN6 supports both NN4 and IE syntax. Which event handler you'll use is determined by whether your script needs to detect non-alphanumeric keys such as function keys, arrow keys and the backspace, or alphanumeric keys.

This lesson only deals with the alphanumeric key, "Enter", so for IE's sake, the above examples use the onKeyPress event handler.

Enter/Return key detection is exactly the same for textareas. For information on how to preserve, add, or replace carriage returns inside textareas, see the Escape and Unescape Methods / Handling Carriage Returns in Textareas lesson.

View the Source