jump to navigation

Controlando el teclado con JavaScript abril 19, 2007

Posted by superpiwi in Java, Javascript, Programacion.
trackback

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;
}

Comentarios»

1. abrahn - mayo 14, 2007

esta muy finoooooooooooo, pero ser que me pueden ayudar a detectar la marca de mi tecldo con jvascript se puede hacer eso

2. superpiwi - mayo 16, 2007

Si eso se pude hacer, yo no tengo ni idea🙂

3. :: Javascript :: Como manejar el teclado - julio 10, 2007

[…] Enlace: Controlando el teclado con javascript […]

4. poloche - enero 8, 2008

magnifico funciono al pelo todo muy bien gracias por poner las soluciones solo habia que remplazar las comillas o apostrofes y funciono
tralves por que este editor lo vuelca asi pero por si acaso le pongo con comillas

function $(id){
return document.getElementById(id);
}

function init()
{

shortcut(“Ctrl+F”,function()
{
$(‘nombreFactura’).focus();
});
shortcut(“Ctrl+R”,function()
{
$(‘nombreD’).focus();
});
shortcut(“Ctrl+D”,function()
{
$(‘nombreC’).focus();
});
shortcut(“Ctrl+G”,function()
{
guardarEncomienda();
});

}

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 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;
}

5. raoul - agosto 16, 2010

alguien podria ayudarme, yo lo quiero para un formulario para deplazarme por los cajas de texto, precionando flecha arriba(ejecuta la combinacion de las teclas shif+tab) y flecha abajo(ejecuta tecla tab).
se los agradeceria mucho…

6. Romina - agosto 3, 2011

Holas:

He probado este script pero tengo problemas con las siguientes teclas:

left:37
right:39
delete:46
home:36
end:35

Mi Script los confunde con estos 5 caracteres: %’.$#
debido a que tienen el mismo código ASCII.

7. Jaime - abril 25, 2012

Hola, genial el código pero me tema que no funciona para IE9.
Yo lo estoy usando para detectar la tecla F3 y en firefox muy bien pero en IE9 no hace nada. Mi código queda así:

function init(){
shortcut(“f3”,function(){
alert(“Has pulsado F3”);
}
);
}
document.addEventListener(“DOMContentLoaded”, init, false);

8. Ajaxman | :: Javascript :: Como manejar el teclado - mayo 10, 2013

[…] Enlace: Controlando el teclado con javascript […]


Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s

A %d blogueros les gusta esto: