Skip to main content
2 de 3
Se agrega más información para indicar cómo debe realizar las pruebas
David E. Luna M.
  • 2.9k
  • 4
  • 14
  • 30

Controlar comportamiento del navegador - Combinaciones de teclas

Una forma de controlar el comportamiento del navegador cuando se presionen las teclas Ctrl + S y/o Ctrl + U es evaluando previamente si el usuario ha presionado la tecla Ctrl como se muestra a continuación:

if ( e.ctrlKey ) {
  // Si el usuario ha presionado la tecla Ctrl
  // las instrucciones acá serán ejecutadas, como
  // por ejemplo:

  e.preventDefault();
}

Ten en cuenta que puede utilizar preventDefault() con stopPropagation() para evitar el comportamiento por defecto del navegador. Vamos a colocar un ejemplo práctico de dicho comportamiento, pero antes, debes recordar que una vez presiones el botón «Ejecutar» seleccione la región del marco flotante donde se muetran los resultados para que posteriormente presiones las teclas para la realización de las pruebas:

onkeydown = e => {
  let tecla = e.which || e.keyCode;
  
  // Evaluar si se ha presionado la tecla Ctrl:
  if ( e.ctrlKey ) {
    // Evitar el comportamiento por defecto del nevagador:
    e.preventDefault();
    e.stopPropagation();
    
    // Mostrar el resultado de la combinación de las teclas:
    if ( tecla === 85 )
      console.log("Ha presionado las teclas Ctrl + U");
    
    if ( tecla === 83 )
      console.log("Ha presionado las teclas Ctrl + S");
  }
}
Primero haga clic acá y luego presione las teclas `Ctrl + S` y `Ctrl + U`

Si bien, se muestra un mensaje indicando que se han presionado las teclas Ctrl + U y Ctrl + S, a la vez, se evita que el navegador muestre el código fuente de la página o se guarde cuando el usuario realice cualquiera de las dos (02) combinaciones. Sin embargo, eso no evita que, utilizando otros métodos puedan acceder a dicho código, como por ejemplo, si se descarga la página de la siguiente forma:

wget -r https://ejemplo.com/

En el ejemplo anterior el comando wget -r descarga una página de forma recursiva. Es decir, se descarga el código HTML, JavaScript, CSS, imágenes, etc. Por lo tanto, no es posible evitar que el quiera ver el código fuente acceda a él.

Uso práctico

Normalmente, cuando se bloquea algún comportamiento por defecto del navegador se hace con la intención de utilizarse para realizar acciones que requieran dichas combinaciones de teclas.

Un posible uso práctico de la combinación de las teclas Ctrl + S es hacer que nuestra aplicación guarde registros en una base de datos en lugar de guardar la página en nuestro computador, que es la acción por defecto del navegador.

David E. Luna M.
  • 2.9k
  • 4
  • 14
  • 30