Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

167
Views
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 answers
Answer question

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 Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!