JavaScript Keypress Event – the right way

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

7 thoughts on “JavaScript Keypress Event – the right way”

  1. 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..

  2. 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,

  3. 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?

  4. I was thinking if how you would use the codes above in outputting keys which are not in the keyboard. we were asked to do something like that.

    for example: press ctrl+alt+f
    then it would just output function symbol(ƒ).

    how could i do it in html/javascript?

Comments are closed.