Empresas
Empleos
  • Sobre nosotros
  • Soluciones
    • Publicación de vacantes
      Publica tu vacante y recibe candidatos calificados en 48h.
    • Evaluación de candidatos
      500+ pruebas técnicas y psicológicas, más anti-fraude.
    • Headhunting
      Búsqueda ejecutiva a la medida de principio a fin.
    • Nómina + EOR
      Dispersión de nómina y EOR en más de 15 países de LATAM.
  • Precios
  • Empleos

0

166
Vistas
Comportamiento de eventos .focus() con Javascript

Tengo estas tres pestañas:

ingrese la descripción de la imagen aquí

Cuando un usuario usa el mouse y hace clic en una de las pestañas (Notas de cumplimiento en este ejemplo), el elemento adecuado en la página con pestañas se enfoca y se resalta adecuadamente.

ingrese la descripción de la imagen aquí

Sin embargo, si el usuario usa el teclado y presiona la tecla Tab para resaltar la pestaña que desea y luego presiona la tecla Intro para seleccionar esa pestaña, la página con pestañas recibe el foco. Luego, a través de JavaScript, enfoco el elemento adecuado en esa página con pestañas (usando el método .focus() en ese elemento), y el mismo asp:DropDownList en el ejemplo se comporta como si el usuario no solo seleccionara el elemento, sino que hizo clic en él:

ingrese la descripción de la imagen aquí

Si luego presiona Enter o Tab, manualmente, la lista desplegable se cierra y el elemento se ve como si el usuario hiciera clic en la pestaña en lugar de usar el teclado:

ingrese la descripción de la imagen aquí

Entonces, ¿hay una manera "simple", después de usar el método .focus(), para luego simular una pulsación de tecla Enter o Tab para que el elemento tenga el foco pero no se active la lista desplegable? ¿O hay otra forma, usando el método .focus() o algún otro enfoque, para evitar que se active la lista desplegable cuando se usa el teclado para navegar por la página?

about 4 years ago · Juan Pablo Isaza
1 Respuestas
Responde la pregunta

0

El comportamiento que menciona parece estar relacionado con el evento keydown. Aquí hay un ejemplo: cuando escribe en el campo de texto, debe enfocarse en el menú desplegable. Cuando presiona Intro en el campo de texto, observe que el primer ejemplo (usando keydown) se comporta de manera similar a lo que informó. El segundo ejemplo (usando la pulsación de tecla) no lo hace.

 document.querySelector('#typeHere').addEventListener("keydown", (e) => { document.querySelector('#focusMe').focus(); }); document.querySelector('#typeHere2').addEventListener("keypress", (e) => { document.querySelector('#focusMe2').focus(); });
 <select id='focusMe'> <option>Test 1</option> <option>Test 2</option> <option>Test 3</option> </select> <input id='typeHere' > <br><br> <select id='focusMe2'> <option>Test 1</option> <option>Test 2</option> <option>Test 3</option> </select> <input id='typeHere2'>

about 4 years ago · Juan Pablo Isaza Denunciar
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Comercial
Legal
Términos y condiciones Política de privacidad
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomiéndame algunas ofertas
Necesito ayuda