Empresas
Empregos
  • Sobre nós
  • Soluções
    • Publicação de vagas
      Publique sua vaga e receba candidatos qualificados em 48h.
    • Avaliações de candidatos
      Mais de 500 testes técnicos e psicológicos, mais anti-fraude.
    • Headhunting
      Busca executiva personalizada do início ao fim.
    • Folha de Pagamento + EOR
      Dispersão de folha e EOR em mais de 15 países da LATAM.
  • Preços
  • Empregos

0

168
Visualizações
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 Respostas
Responde à pergunta

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 Relatório
Responde à pergunta
Encontrar trabalhos remotos

Descubra a nova forma de encontrar um emprego!

melhores empregos
Principais categorias de trabalho
Empresas
Postar vaga Preços Comercial
Jurídico
Termos e Condições Política de privacidade
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomende algumas ofertas para mim
Preciso de ajuda