Al hacer clic en un botón, quiero que un elemento de entrada se enfoque. Cuando el elemento de entrada pierde el foco, quiero que el botón reciba el foco. Aquí hay un ejemplo simple.
<body> <button id="b1" onclick="document.getElementById('i1').focus();">1</button> <input id="i1" type="text" onblur="document.getElementById('b1').focus();"/> <button id="b2" onclick="document.getElementById('i2').focus();">2</button> <input id="i2" type="text" onblur="document.getElementById('b2').focus();"/> </body>Cuando hago clic en cualquiera de los botones, el elemento de entrada se enfoca. Esto funciona como se desea. Cuando dejo cualquiera de las dos entradas haciendo clic en el lienzo, el foco no va al botón. Este es mi problema principal.
Cuando dejo la primera entrada con tabulador, todos los navegadores pasan el foco al primer botón. Pero cuando dejo el segundo boton con tab, solo firefox pasa el foco al segundo boton. Chrome y Opera no muestran un foco. Estoy desconcertado de por qué el segundo botón se trata de manera diferente.
No necesitas usar JavaScript . HTML y CSS es suficiente. Use la etiqueta de etiqueta y convierta su apariencia en un botón . :)
label.btn{ -webkit-appearance: button; -moz-appearance: button; appearance: button; padding: 1px 6px; border:1px solid } <label class="btn" for="i1" id="b1">1</label> <input id="i1" type="text"/> <label class="btn" for="i2" id="b2">2</label> <input id="i2" type="text" />Si agrega un estilo :focus en su CSS, puede ver que funciona bien. Saqué su JS del marcado HTML para que fuera visible y agregué algunos oyentes para los usuarios de teclado.
Precaución: forzar el enfoque de nuevo al botón interfiere con el flujo natural de la página, por lo que probablemente no lo recomendaría a menos que lo tenga adjunto a alguna validación de entrada que se active cuando sea necesario; de lo contrario, ¿cómo se mueven los usuarios del teclado al siguiente elemento?
const inputOne = document.getElementById('i1'); const btnOne = document.getElementById('b1'); const inputTwo = document.getElementById('i2'); const btnTwo = document.getElementById('b2'); // Listen for click to button one btnOne.addEventListener('click', function() { inputOne.focus(); }) // Make sure we listen for keyboard users btnOne.addEventListener('keydown', function(event) { if(event.keyCode === 90) { inputOne.focus(); } }) // Leaving input one inputOne.addEventListener('blur', function() { btnOne.focus(); }) // Listen for click to button two btnTwo.addEventListener('click', function() { inputTwo.focus(); }) // Make sure we listen for keyboard users btnTwo.addEventListener('keydown', function(event) { if(event.keyCode === 90) { inputTwo.focus(); } }) // Leaving input two inputTwo.addEventListener('blur', function() { btnTwo.focus(); }) :focus { border: 1px solid red; } <button id="b1">1</button> <input id="i1" type="text"/> <button id="b2">2</button> <input id="i2" type="text" />