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;
}
esta muy finoooooooooooo, pero ser que me pueden ayudar a detectar la marca de mi tecldo con jvascript se puede hacer eso
Si eso se pude hacer, yo no tengo ni idea 🙂
[…] Enlace: Controlando el teclado con javascript […]
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;
}
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…
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.
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);
[…] Enlace: Controlando el teclado con javascript […]