Capturar la tecla CONTROL del teclado con Javascript

Capturar la tecla CONTROL del teclado con JavaScript. En algunos casos en nuestros proyectos de plataforma web tendremos que capturar algunas ejecuciones propias del teclado fisico.

Ahora, en este ejemplo veremos cómo capturamos la tecla control y de esta manera bloquear su ejecución en el navegador, específicamente las combinaciones de tecla CONTROL + S, veremos que no se ejecute el guardar como propios de los navegadores.

Para seguridad algunas empresas podrían solicitar desactivar esas opciones por seguridad u otras opciones, suele ser necesario usar combinaciones de teclas CONTROL+tecla para ejecutar ciertas acciones y bloquearlas.

Capturar la combinación CTRL + tecla en JavaScript es muy fácil con este código, veamos:

Capturar la tecla CONTROL del teclado con Javascript

//codigo javascript

var isCtrl = false;
document.onkeyup=function(e){
if(e.which == 17) isCtrl=false;
}
document.onkeydown=function(e){
if(e.which == 17) isCtrl=true;
if(e.which == 83 && isCtrl == true) {
//Combinancion de teclas CTRL+S y bloquear su ejecucion en el navegador
return false;
}
}

Ya visto el código como verán la aplicación es sencilla en nuestras etiquetas <HEAD></HEAD>, en medio de estas debemos colocar este código para bloquear esa ejecución cuando se pulsa CTRL+ S.

Si observan se producen dos eventos de teclado, por lo que no es posible saber si se ha ejecutado en una sola llamada. Por esto primero comprobamos si se pulsa la tecla CTRL y se pone un flag a verdadero y luego dependiendo de la tecla que queramos, si se detecta que se pulsa y está el flag activo, se realiza la acción. Hay que ponerlo en false para que el navegador no compile la acción que tiene por defecto. Cuando se deja de pulsar la tecla CTRL se pone el flag a false.

El número 17 que ven en el código hace referencia a la tecla CONTROL

El número 83 que ven en el código hace referencia a la tecla S

Una vez identificados podemos modificar este código a nuestro antojo, pudiendo cambiarle por la tecla A de acuerdo a sus necesidades.

Aquí el codigo completo.

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Documento sin título</title>
<script type="text/x-javascript">
//codigo javascript

var isCtrl = false;
document.onkeyup=function(e){
if(e.which == 17) isCtrl=false;
}
document.onkeydown=function(e){
if(e.which == 17) isCtrl=true;
if(e.which == 83 && isCtrl == true) {
//Combinancion de teclas CTRL+S y bloquear su ejecucion en el navegador
return false;
}
}
</script>
</head>
<body>
</body>
</html>

Este código ha sido probado en Mozilla Firefox y Google Chrome, espero que le sea de utilidad.

Capturar la tecla CONTROL del teclado con Javascript
Capturar la tecla CONTROL del teclado con Javascript

Referencia:

How to create Ctrl+Key shortcuts in Javascript

Me fascina la programación en diversos lenguajes y mas aún si son sistemas web o páginas web.

Entradas relacionadas

Cómo usar Explode en JavaScript Split()

Cómo usar Explode en JavaScript Split()

Cómo usar Explode en JavaScript Split(). Explode es capaz de dividir una cadena de texto o un array y se basa bajo un criterio en común dentro…

Integrar Bootstrap 3 Badge Colors

Integrar Bootstrap 3 Badge Colors

En este artículo vamos a integrar colores de fondo en la clase BADGE de Bootstrap 3. Integrar Bootstrap 3 Badge Colors. En el framework Bootstrap 3 por…

5 formar de validar checkbox

5 formar de validar checkbox

5 formar de validar checkbox. Aquí mostrare varias formas de validar checkbox usando jQuery y JavaScript, también usaremos funciones a nivel de formulario. Aquí debéis fijaros que…

Cómo mostrar ocultar DIV usando CHECKBOX

Cómo mostrar ocultar DIV usando CHECKBOX

Cómo mostrar ocultar DIV usando CHECKBOX?. Lo que haremos será trabajar en un div al hacer clic con el mouse usando jQuery, use el método toggle(). Por…

Enviar formulario usando checkbox

Enviar formulario usando checkbox

Enviar formulario usando checkbox. En este articulo veremos una forma de enviar un formulario HTML usando una casilla o varias casillas de verificación (checkbox). Por lo tanto,…

Limpiar Select2 jQuery

Limpiar Select2 jQuery: Ejemplo completo

Limpiar Select2 jQuery. En este articulo aprenderemos a restablecer para mostrar el marcador de posición select2. JQuery Select2 restablece y luego muestra el marcador de posición. Por…

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *