Aquí está mi código. Por alguna razón, este código no enfoca el cuadro de texto con la identificación "amigo", aunque la etiqueta de párrafo con identificación "respuesta" obtiene el código clave del botón en el que hice clic. Es como si la línea con el comando focus() se ignorara por completo.
document.getElementById("thing").addEventListener("keypress", function() { myFunction(event); }); function myFunction(event) { document.getElementById("answer").innerHTML = event.keyCode; document.getElementById("dude").focus(); } <!DOCTYPE html> <html> <body> <input type="text" id="thing"> <input type="text" id="dude"> <p id="answer"></p> </body> </html>Sin embargo, si hiciera una ligera modificación y pusiera la línea con el foco() fuera de addEventListener(), entonces el foco() funcionaría. Por ejemplo, el siguiente código funciona:
document.getElementById("dude").focus(); document.getElementById("thing").addEventListener("keypress", function() { myFunction(event); }); function myFunction(event) { document.getElementById("answer").innerHTML = event.keyCode; } <!DOCTYPE html> <html> <body> <input type="text" id="thing"> <input type="text" id="dude"> <p id="answer"></p> </body> </html>El código anterior en realidad comenzaría dando el foco al cuadro de texto "amigo".
¿Hay alguna razón para esto y algo que pueda hacer al respecto?
El controlador de eventos de pulsación de tecla se activa demasiado pronto: el usuario no ha terminado de presionar la tecla e ingresar el valor en ese punto, por lo que el enfoque vuelve al campo de entrada inicial. Vea cómo si cambia el enfoque después de un setTimeout , funcionará:
document.getElementById("thing").addEventListener("keypress", function() { myFunction(event); }); function myFunction(event) { document.getElementById("answer").innerHTML = event.keyCode; setTimeout(() => document.getElementById("dude").focus()); } <input type="text" id="thing"> <input type="text" id="dude"> <p id="answer"></p> O busque el evento keyup en su lugar:
document.getElementById("thing").addEventListener("keyup", function() { myFunction(event); }); function myFunction(event) { document.getElementById("answer").innerHTML = event.keyCode; document.getElementById("dude").focus(); } <input type="text" id="thing"> <input type="text" id="dude"> <p id="answer"></p>Por ejemplo, el siguiente código funciona:
No exactamente, porque con ese código, estás enfocando la entrada dude en la carga de la página , en lugar de cuando la entrada del elemento tiene thing escritas.
También debe evitar usar keypress en código moderno , está en desuso:
Esta función ya no se recomienda. Aunque es posible que algunos navegadores aún lo admitan, es posible que ya se haya eliminado de los estándares web relevantes, que esté en proceso de eliminación o que solo se conserve por motivos de compatibilidad. Evite usarlo y actualice el código existente si es posible; consulte la tabla de compatibilidad en la parte inferior de esta página para orientar su decisión. Tenga en cuenta que esta función puede dejar de funcionar en cualquier momento.
Dado que este evento ha quedado obsoleto, debe buscar usar beforeinput o keydown en su lugar.
keyCode también lo es, técnicamente, pero su reemplazo, .code , no es compatible en todas partes .
Use el evento keyup en lugar de keypress , porque la acción predeterminada del evento keypress vuelve a poner el foco en ese elemento de entrada.
document.getElementById("thing").addEventListener("keyup", function() { myFunction(event); }); function myFunction(event) { document.getElementById("answer").innerHTML = event.keyCode; document.getElementById("dude").focus(); } <!DOCTYPE html> <html> <body> <input type="text" id="thing"> <input type="text" id="dude"> <p id="answer"></p> </body> </html>Parece que está tratando de cambiar el enfoque de la entrada "cosa" a la entrada "amigo" después de completar una "pulsación de tecla" o "tecla arriba" en la entrada "cosa".
No entiendo el caso de uso para esto. Pero, en mi opinión, si está tratando de cambiar el estado de enfoque después de ingresar un valor, recomendaría colocar un detector de eventos en el evento "cambiar". Simplemente puede presionar la tecla "TAB" en su teclado después de que haya terminado de ingresar datos en la "cosa" de entrada y el enfoque se cambiará a la entrada "amigo" y la función se ejecutará. Ambos logrados!
document.getElementById('thing').addEventListener('change', function (event) { myFunction(event.target.value) }) function myFunction(answer) { document.getElementById('answer').innerText = answer } <input type="text" id="thing" /> <input type="text" id="dude" /> <p id="answer"></p>