I had an occassion where I had to capture the “enter” key press in a text box and couldn’t quite remember how to do that. So, like the well-adjusted web developer I am, I Google’d for the answer. I was suprised to find how many different solutions there were and how some of them just plain didn’t work.

I turned to the tried-and-true Prototype library (because that’s how I remembered doing it in the first place). The bonus with using Prototype is that it will actually be browser compatible.

Here is the penultimate solution to capturing an “enter” keypress in an HTML input text box.

The HTML:

<input type="text" name="my_text" id="my_text" value="" />

The JavaScript:

<script type="text/javascript"><!--
function onMyTextKeypress(event)
{
if (Event.KEY_RETURN == event.keyCode) {
// do something usefull
alert('Enter key was pressed.');
}
return;
}

Event.observe('my_text', 'keypress', onMyTextKeypress);
//-->
</script>

Now, don’t forget to include the prototype.js script in the HTML page!

<script type="text/javascript" src="/js/prototype.js"></script>

The JavaScript must execute after the DOM elements are rendered. One way to do it is to put the JavaScript code in a SCRIPT element after the INPUT element. However, another way would be to put the following code in the SCRIPT element in the HEAD element:

Event.observe(window, 'load', function() {
Event.observe(Event.observe('my_text', 'keypress', onMyTextKeypress);
});


I like this method because all the JavaScript can be kept in the HEAD, or in a JS library file, instead of splattering the code throughout the document body.

References:

Prototype Event.observe API

4 Comments

• 

  By Karl, 04 Oct 2008 @ 12:25 am

  Ok, thanks first of all for this tidbit of code! I have a question refering to how/where did you discover that the following code is valid:

  Event.KEY_RETURN

  Is that a constant? Where is this defined? Is it an extension of the Prototype library? I don’t see it on their site.

  Thanks!
  Karl..
• 

  By Steve Wamsley, 07 Oct 2008 @ 9:16 pm

  the KEY values are defined in prototype.js in the Event object definition (~line #3667, depending on prototype version). Here they are:

  KEY_BACKSPACE: 8,
  KEY_TAB: 9,
  KEY_RETURN: 13,
  KEY_ESC: 27,
  KEY_LEFT: 37,
  KEY_UP: 38,
  KEY_RIGHT: 39,
  KEY_DOWN: 40,
  KEY_DELETE: 46,
  KEY_HOME: 36,
  KEY_END: 35,
  KEY_PAGEUP: 33,
  KEY_PAGEDOWN: 34,
  KEY_INSERT: 45,
• 

  By Dave, 08 Oct 2008 @ 4:03 pm

  I was wondering how you would check to see if Shift + Enter is hit? I am using this to submit a text box but I would like hte user to be able to hit Shit + Enter to enter a new line. Can the Event call take in two buttons being pressed?
• 

  By Steve Wamsley, 09 Nov 2008 @ 7:56 pm

  Detecting Shift + Enter is a bit more tricky, especially with cross-browser considerations. I found the following links enlightening:

  http://www.simpltry.com/2007/01/04/shift-key-detection/

  http://www.webdeveloper.com/forum/archive/index.php/t-102141.html

  Basically, in your keypress handler event, you want to detect if event.shiftKey is true AND event.keyCode == 13.

Other Links to this Post

RSS feed for comments on this post. TrackBack URI

Leave a comment