Hay veces que queremos que nuestra pagina web responda a una combinación de teclas especifica para hacer alguna acción, como por ejemplo, si estamos haciendo un editor de textos. Según que navegador es posible que estas pulsaciones ya tengan una función asignada en el navegador web y por lo tanto no nos responda como nosotros queremos nuestra pagina. En esta ocasión os explico como solucionar este problema desde JAVASCRIPT.
Evento keydown
Con el evento keydown controlaremos que teclas se están pulsando, y sera aquí conde deberemos de “anular” el envío de esas pulsaciones para evitar que coincidan con alguna función ya programada en el navegador donde nos encontremos.
Un ejemplo muy simple es el siguiente. Queremos activar la negrita, cursiva y subrayado cuando pulsamos las combinaciones de teclas
ctrl+b
ctrl+i
ctrl+u
En algunos navegadores, como Firefox, ctrl+b abre los favoritos, y ctrl+u abre el código de la pagina, por lo que no conseguiremos el efecto deseado.
Este seria el código que queremos ejecutar.
editor.addEventListener("keydown", function (e) {
var tecla = this ? e.keyCode : e.which;
if (e.ctrlKey) {
switch (tecla) {
case 66:
//bold
document.execCommand('bold', false, null);
return false;
break;
case 73:
//italic
document.execCommand('italic', false, null);
return false;
break;
case 85:
//underline
document.execCommand('underline', false, null);
return false;
break;
default:
retorno = true;
}
}
});
La solución
Pues la solución es mas simple de lo que parece. Simplemente debemos de cancelar en el evento un par de cositas y, controlando navegadores (sobre todo antiguos), cancelamos también la propagación de las teclas presionadas.
e.cancelBubble = true;
e.returnValue = false;
if (e.stopPropagation) { //for firefox and others
e.stopPropagation();
e.preventDefault();
}
Por lo que nuestro código ahora quedaría algo tal que así:
editor.addEventListener("keydown", function (e) {
var tecla = this ? e.keyCode : e.which;
if (e.ctrlKey) {
switch (tecla) {
case 66:
//bold
document.execCommand('bold', false, null);
e.cancelBubble = true;
e.returnValue = false;
if (e.stopPropagation) { //for firefox and others
e.stopPropagation();
e.preventDefault();
}
return false;
break;
case 73:
//italic
document.execCommand('italic', false, null);
e.cancelBubble = true;
e.returnValue = false;
if (e.stopPropagation) { //for firefox and others
e.stopPropagation();
e.preventDefault();
}
return false;
break;
case 85:
//underline
document.execCommand('underline', false, null);
e.cancelBubble = true;
e.returnValue = false;
if (e.stopPropagation) { //for firefox and others
e.stopPropagation();
e.preventDefault();
}
return false;
break;
default:
retorno = true;
}
}
});
Conclusiones
Bueno, como imaginareis esto tiene muchas otras aplicaciones, yo solo he abierto la puerta, ahora vosotros debéis de cruzarla.
No he explicado bien la linea document.execCommand('bold', false, null); esto os lo dejo para que lo investigues, o a lo mejor otro día en otro blog lo explicare mas detalladamente.
Una lectura interesante este link, de donde saque las conclusiones aqui expuestas.
Happy coding
#javascript #trucos