jump to navigation

Controlando el teclado con JavaScript abril 19, 2007

Posted by superpiwi in Java, Javascript, Programacion.
8 comments

En OpenJS me encuentro una libreria muy interesante. Nos permite mapear combinaciones de teclas para ejecutar las funciones javascript que queramos cuando se pulsen.Su utilizacion es muy sencilla. Ejemplo:


<HTML>
<HEAD>
</script><script src="shortcuts.js" type="text/javascript"></script>
<SCRIPT>
function init()
{
alert("iniciado");
shortcut("Ctrl+S",function()
{
alert("Has pulsado Control+S");
});
shortcut("Alt+E",function()
{
alert("Has pulsado Alt+E");
});
}
//addEvent(window,'load',init);
</SCRIPT>
</HEAD>
<BODY onload="init();">
Shorcuts...listos!!!...Pulsa "Control"+"S"
</BODY>
</HTML>

Con este ejemplo al pulsar Control+S o Alt+E se disparan las funciones. Podriamos mapear acciones de nuestra web con combinaciones de tecla.
Mas simple imposible.

Necesitas la siguiente libreria (actualmente en estado beta). Te la puedes descargar del sitio web, aunque aqui corto y pego su contenido
para que este accesible:

shortcuts.js


function shortcut(shortcut,callback,opt) {
//Provide a set of default options
var default_options = {
'type':'keydown',
'propagate':false,
'target':document
}
if(!opt) opt = default_options;
else {
for(var dfo in default_options) {
if(typeof opt[dfo] == 'undefined') opt[dfo] = default_options[dfo];
}
}
var ele = opt.target
if(typeof opt.target == 'string') ele = document.getElementById(opt.target);
var ths = this;
//The function to be called at keypress
var func = function(e) {
e = e || window.event;
//Find Which key is pressed
if (e.keyCode) code = e.keyCode;
else if (e.which) code = e.which;
var character = String.fromCharCode(code).toLowerCase();
var keys = shortcut.toLowerCase().split("+");
//Key Pressed - counts the number of valid keypresses - if it is same as the number of keys, the shortcut function is invoked
var kp = 0;
//Work around for stupid Shift key bug created by using lowercase - as a result the shift+num combination was broken
var shift_nums = {
"`":"~",
"1":"!",
"2":"@",
"3":"#",
"4":"$",
"5":"%",
"6":"^",
"7":"&",
"8":"*",
"9":"(",
"0":")",
"-":"_",
"=":"+",
";":":",
"'":"\"",
",":"<",
".":">",
"/":"?",
"\\":"|"
}
//Special Keys - and their codes
var special_keys = {
'esc':27,
'escape':27,
'tab':9,
'space':32,
'return':13,
'enter':13,
'backspace':8,
'scrolllock':145,
'scroll_lock':145,
'scroll':145,
'capslock':20,
'caps_lock':20,
'caps':20,
'numlock':144,
'num_lock':144,
'num':144,
'pause':19,
'break':19,
'insert':45,
'home':36,
'delete':46,
'end':35,
'pageup':33,
'page_up':33,
'pu':33,
'pagedown':34,
'page_down':34,
'pd':34,
'left':37,
'up':38,
'right':39,
'down':40,
'f1':112,
'f2':113,
'f3':114,
'f4':115,
'f5':116,
'f6':117,
'f7':118,
'f8':119,
'f9':120,
'f10':121,
'f11':122,
'f12':123
}
for(var i=0; k=keys[i],i<keys.length; i++) {
//Modifiers
if(k == 'ctrl' || k == 'control') {
if(e.ctrlKey) kp++;
} else if(k == 'shift') {
if(e.shiftKey) kp++;
} else if(k == 'alt') {
if(e.altKey) kp++;
} else if(k.length > 1) { //If it is a special key
if(special_keys[k] == code) kp++;
} else { //The special keys did not match
if(character == k) kp++;
else {
if(shift_nums[character] && e.shiftKey) { //Stupid Shift key bug created by using lowercase
character = shift_nums[character];
if(character == k) kp++;
}
}
}
}
if(kp == keys.length) {
callback(e);
if(!opt['propagate']) { //Stop the event
//e.cancelBubble is supported by IE - this will kill the bubbling process.
e.cancelBubble = true;
e.returnValue = false;
//e.stopPropagation works only in Firefox.
if (e.stopPropagation) {
e.stopPropagation();
e.preventDefault();
}
return false;
}
}
}
//Attach the function with the event
if(ele.addEventListener) ele.addEventListener(opt['type'], func, false);
else if(ele.attachEvent) ele.attachEvent('on'+opt['type'], func);
else ele['on'+opt['type']] = func;
}