Eight Weeks of Prototype: Week 4, Event Handling in Prototype
Handling Keyboard Events
So far we haven't concerned ourselves with any specifics of an event that occurs, other than on which element the event occurred. Often an event will be triggered by a particular key press or by some movement or action with the mouse. In this section we will look at how to handle events that are triggered by the keyboard.
To determine which key was pressed, you can read the keyCode property of the event object passed to your event handler. Prototype defines a number of useful constants that help you determine which key was pressed. Specifically, these are:
Event.KEY_BACKSPACEEvent.KEY_TABEvent.KEY_RETURNEvent.KEY_ESCEvent.KEY_LEFTEvent.KEY_UPEvent.KEY_RIGHTEvent.KEY_DOWNEvent.KEY_DELETEEvent.KEY_HOMEEvent.KEY_ENDEvent.KEY_PAGEUPEvent.KEY_PAGEDOWNEvent.KEY_INSERT
To demonstrate how these codes can be used, I have written a simple example, shown in Listing 12. In this example there is a text input. If you hit the escape key the text in the input is selected, while hitting backspace results in the entire value being cleared. While this doesn't serve much practical use, hopefully it demonstrates how you can read the key codes.
<html> <head> <title>Determining which key was pressed</title> <script type="text/javascript" src="/js/prototype.js"></script> </head> <body> <div> <input type="text" id="foo" /> </div> <script type="text/javascript"> function onFooKeyup(e) { var element = Event.element(e); switch (e.keyCode) { case Event.KEY_ESC: element.activate(); Event.stop(e); break; case Event.KEY_BACKSPACE: element.value = ''; Event.stop(e); break; } } $('foo').observe('keyup', onFooKeyup); </script> </body> </html>