Cada vez que se presiona la tecla de tabulación sin un elemento activo/enfocado, se selecciona el primer elemento enfocable (este es el comportamiento general de la tab key . Sin embargo, no quiero esto en mi aplicación, ya que quiero enfocarme en otro elemento (no en el el primero).
He intentado configurar detectores de eventos para la tecla de tabulación, pero esto solo funciona si algún elemento ya está seleccionado y no cuando no hay ningún elemento activo.
¿Hay alguna forma de escuchar este 'evento de pestaña inicial' cuando no hay elementos activos? En el fragmento de código, puede ver que el evento de pestaña solo escucha la segunda pestaña, mientras que selecciona el primer campo después de la primera pestaña.
document.getElementById("form").addEventListener("keydown", function(e){ if(e.keyCode===9){ document.getElementById("demo").innerHTML = "Tab"; } } ) <div id="form"> <label for="fname">First name:</label> <input type="text" id="fname" name="fname"><br><br> <label for="lname">Last name:</label> <input type="text" id="lname" name="lname"><br><br> <input type="submit" value="Submit"> </div> <p id="demo"></p>Yo iría con TabIndex:
Al agregar tabindex="0" a un elemento, puede acceder a él con la tecla de su teclado. Agregar tabindex="-1" no da acceso a ese elemento basado en el teclado (sin embargo, puede acceder a él para enfocarse mediante programación, con .focus() o con un clic, por ejemplo).
Entonces, si su comportamiento basado en el teclado no funciona porque no hay nada seleccionado, obligue a su aplicación a seleccionar un elemento en el inicio (por ejemplo, su elemento con un tabindex de -1):
// By using a tabindex of -1, the element won't be focusable via keyboard // but, we can programmatically focus it. .attr( "tabindex", "-1" ) .focus()