2

Estoy creando un formulario y mi problema es que quiero que al presionar la tecla enter, se simule la presión de la tecla Tab (para pasar al siguiente input).

Estoy codeando con typescript (en Angular y solamente escucho la presión de la tecla 'enter').

Busqué documentación y no logré encontrar nada. Paso a dejar mi código:

  @HostListener('document:keypress', ['$event'])
  listenerKeyPress(event: any){
      if(this.isSelected){
        switch(event.key.toLowerCase()){
          case 'enter': /*HACER COSAS Y PRESIONAR TECLA TAB*/; break; 
          default: '';
        }
      }
  }
3
  • 2
    simular presionar una tecla (no estoy seguro, pero) podria ser impedido por el sistema en algunos casos, o espero que asi sea, porque es algo inseguro jaja. No podrias hacer que al presionar la tecla enter se ejecute una funcion que coloque el focus en el input que necesitas?
    – Agustin G.
    el 21 sep. 2022 a las 13:09
  • 2
    @AgustinG. tiene razon, mas que simular que se presione una tecla, busca la forma de iterar entre los inputs que te interesan. el 21 sep. 2022 a las 13:25
  • 1
    No lo pensé por el lado de la inseguridad, tiene todo el sentido del mundo. Voy a pensar como hacer focus en el proximo input. Muchas gracias! el 21 sep. 2022 a las 14:22

1 respuesta 1

1

No puedes directamente simular el evento "pulsar Tab" para mover al siguiente campo porque el navegador sabe si el evento es "sintético" o real. Los eventos reales tienen la propiedad isTrusted con valor true, mientras que los generados programáticamente no. Estos últimos no activan el comportamiento de navegación que buscas:

document.addEventListener("keydown",isEnter);

function isEnter(keyboardEvent) {
  console.log(keyboardEvent.key, JSON.stringify(keyboardEvent));
  if (keyboardEvent.key === 'Enter') {
    keyboardEvent.preventDefault();
    console.log("triggering Tab");
    document.dispatchEvent(new KeyboardEvent("keydown", {key: 'Tab'}));
  }
}
<label> Texto 1</label><input id="text1"/>
<label> Texto 2</label><input id="text1"/>

Una solución sería que tu aplicación supiese en qué campo está y moviera el foco al siguiente, usando element.focus(), por ejemplo

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.