Skip to main content
Mejora de formato al incorporar las etiquetas de las teclas.
Origen Enlace
David E. Luna M.
  • 2.9k
  • 4
  • 14
  • 30

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

Si bien, se muestra un mensaje indicando que se han presionado las teclas Ctrl + UCtrl + U y Ctrl + SCtrl + 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:

Un posible uso práctico de la combinación de las teclas Ctrl + SCtrl + 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.

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:

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:

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.

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:

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:

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.

Se agrega más información para indicar cómo debe realizar las pruebas
Origen Enlace
David E. Luna M.
  • 2.9k
  • 4
  • 14
  • 30

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");
  }
}
Presione lasPrimero teclashaga `Ctrl+U`yclic luegoacá `Ctrl+S`y unaluego vezpresione hayaslas presionadoteclas el`Ctrl botón+ «Ejecutar»S` y observe el resultado en`Ctrl la+ consola.U`

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:

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");
  }
}
Presione las teclas `Ctrl+U`y luego `Ctrl+S` una vez hayas presionado el botón «Ejecutar» y observe el resultado en la consola.

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`
Origen Enlace
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:

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");
  }
}
Presione las teclas `Ctrl+U`y luego `Ctrl+S` una vez hayas presionado el botón «Ejecutar» y observe el resultado en la consola.

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.