在更改时自动更新文本条目

我有一个简单的HTML表单，包含两个文本条目。我想复制文本从第一个输入字段到第二个，只要文本在第一个字段的变化。目前，只有在单击第二个条目时才应用更改。如何解决这个问题，以便无需单击第二个条目就可以看到更改?

<!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>

改为监听input事件:

<!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>

删除您的myFunction()，它将工作。我已经测试过了。

<!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>

相关内容

最新更新

热门标签：