Java Script and Keyboard Events

JScript and Keyboard Events
Event Name: onkeypress
Description: This event will be triggerd/generated when the user press and release a any keyboard button on the element where onkeypress event is used. Only those elements which receive keyboard focus are supported eg: Hyperlinks, Buttons, Textboxes,etc.,
Example: Inside a script Block: function somName() { document.bgColor = Red; } Inside the Body: <p onkeypress='somName();'>Use any element which receives keyboard focus..</p> Step-1: Set focus on this paragraph by pressing tab or clicking with the mouse.
Step-2: Now press and release any key on this paragraph to change the documents background color to Red

Event Name: onkeydown
Description: This event will be triggerd/generated when the user presses (but not releases) any keyboard button on the element where onkeydown event is used. Only those elements which receive keyboard focus are supported eg: Hyperlinks, Buttons, Textboxes,etc.,
Example: Inside a script Block: function somName() { document.bgColor = Green; } Inside the Body: <p onkeydown='somName();'>Use any element which receives keyboard focus..</p> Step-1: Set focus on this paragraph by pressing tab or clicking with the mouse.
Step-2: Now press (and dont release) any key on this paragraph to change the documents background color to Green

Event Name: onkeyup
Description: This event will be triggerd/generated when the user releases a pressed any keyboard button on the element where onkeyup event is used. Only those elements which receive keyboard focus are supported eg: Hyperlinks, Buttons, Textboxes,etc.,
Example: Inside a script Block: function somName() { document.bgColor = Blue; } Inside the Body: <p onkeyup='somName();'>Use any element which receives keyboard focus..</p> Step-1: Set focus on this paragraph by pressing tab or clicking with the mouse.
Step-2: Now release a pressed any key on this paragraph to change the documents background color to Blue
<h2>A Complete Example:</h2> <html> <head> <title>Keyboard Events</title> <script type="text/javascript"> function chngBgColor(color) { document.bgColor= color; } </script> </head> <body> <a href="#" onkeypress="chngBgColor('Red');" >Type on me! </a> <br /> <a href="#" onkeydown="chngBgColor('Green');">Press on me!</a> <br /> <a href="#" onkeyup="chngBgColor('Blue');">Release on me!</a> </body> </html>

Subscribe to: Posts (Atom)