Tengo un formulario HTML simple con dos entradas de texto. Quiero copiar el texto del primer campo de entrada al segundo tan pronto como cambie el texto del primer campo. Actualmente, los cambios solo se aplican cuando hago clic en la segunda entrada. ¿Cómo puedo solucionar esto para que los cambios sean visibles sin tener que hacer clic en la segunda entrada?
<!DOCTYPE html> <html> <body> <form onchange="myFunction()"> <label for="field_1">field 1:</label> <input type="text" id="field_1" name="field_1"><br><br> <label for="field_2">field 2:</label> <input type="text" id="field_2" name="field_2"><br><br> </form> <script> function myFunction() { var x = document.getElementById("field_1").value; document.getElementById("field_2").value = "copy: " + x; } </script> </body> </html>Escuche el evento de input en su lugar:
<!DOCTYPE html> <html> <body> <form oninput="myFunction()"> <label for="field_1">field 1:</label> <input type="text" id="field_1" name="field_1"><br><br> <label for="field_2">field 2:</label> <input type="text" id="field_2" name="field_2"><br><br> </form> <script> function myFunction() { var x = document.getElementById("field_1").value; document.getElementById("field_2").value = "copy: " + x; } </script> </body> </html>Elimine su myFunction() funcionará. Ya lo he probado.
<!DOCTYPE html> <html> <body> <form> <label for="field_1">field 1:</label> <input type="text" id="field_1" name="field_1"><br><br> <label for="field_2">field 2:</label> <input type="text" id="field_2" name="field_2"><br><br> </form> <script> document.getElementById('field_2').addEventListener("click", function() { this.value = document.getElementById('field_1').value; }); </script> </body> </html>