Keyboard navigation with JavaScript and jQuery
Martin Grill at http://arrglarks.de had posted a great tutorial about keyboard navigator with jQuery here.
You can read that tutorial here also :). Thanks Martin Grill for the post :
I had to add functionality for keyboard navigation to my latest project at work recently. It started out with the need to disable the browser’s postback when someone hits ENTER in a formular. Of course more had to be added once our usability guy realized that theoretically eliminates the need for a mouse. The following example is a bit more basic though and covers only what’s need to understand the concepts.
First of all we have to register the event on the document. Unfortunately keypressed isn’t supported on all browsers and keyup is a little too late to prevent all browser functions so we have to go with keydown.
$(document).keydown(function(event){
For cross-browser compatibility two properties of the event need to be checked:
event.keyCode and event.which.var key = event.keyCode || event.which;
And the last thing you have to know is whether the focus is on a textbox or a textarea. Otherwise we can screw up the ability to edit text very easy if we work with
ENTER, DELETE or BACKSPACE. The check is done by looking at event.target.type.if(event.target.type !== 'textarea'){
For the rest of the example, let’s say we have three buttons on our page, selected by jQuery, which get shown and hidden dynamically according to the context: one back button,
$back, one forward button, $forward and one button to submit the form, $save.//ENTER
if (key === 13) {
//The button has to be visible to be used.
if ($save.is(':visible')) {
$save.click();
} else if ($forward.is(':visible')) {
$forward.click();
}
//Preventing any other action by the browser
//even if no button is visible
return false;
}
//Not in a textarea or textbox
if (event.target.type !== 'text') {
//BACKSPACE
if (key === 8) {
//SHIFT is also pressed
if (event.shiftKey) {
if ($forward.is(':visible')) {
$forward.click();
}
} else {
if ($back.is(':visible')) {
$back.click();
}
}
return false;
}
}
}
});
That’s it, our application’s enhanced with a few simple keyboard commands.
A little tip at the end: To make your code easier to write and understand here’s a handy object maps the real key codes of the most important special keys to easy to use constants. Just put it in front of the rest of your code.
var keyCode = {
BACKSPACE: 8,
CAPS_LOCK: 20,
COMMA: 188,
CONTROL: 17,
DELETE: 46,
DOWN: 40,
END: 35,
ENTER: 13,
ESCAPE: 27,
HOME: 36,
INSERT: 45,
LEFT: 37,
NUMPAD_ADD: 107,
NUMPAD_DECIMAL: 110,
NUMPAD_DIVIDE: 111,
NUMPAD_ENTER: 108,
NUMPAD_MULTIPLY: 106,
NUMPAD_SUBTRACT: 109,
PAGE_DOWN: 34,
PAGE_UP: 33,
PERIOD: 190,
RIGHT: 39,
SHIFT: 16,
SPACE: 32,
TAB: 9,
UP: 38
}
Tags: Javascript, jQuery
Previous Article
Share your views...
2 Respones to "Keyboard navigation with JavaScript and jQuery"
Mần game bằng cái này được hé hé
lúc 03:47 17 tháng 8, 2009
Кому интересно пишите
lúc 21:20 22 tháng 8, 2009
Đăng nhận xét