实现两个输入框同步输入的方法

阅读提示：本文共计约2804个文字，预计阅读时间需要大约7分钟，由作者wpsoffice计算机二级题库编辑整理创作于2023年11月05日23时16分31秒。

要实现两个输入框同步输入，可以使用JavaScript和事件监听器来实现。以下是一个简单的示例：

1. 在HTML中创建两个输入框和一个按钮：

<input type="text" id="input1" />
<input type="text" id="input2" />
<button onclick="syncInputs()">同步输入</button>

2. 接下来，使用JavaScript编写一个函数来同步两个输入框的值：

function syncInputs() {
  document.getElementById('input1').value = document.getElementById('input2').value;
  document.getElementById('input2').value = document.getElementById('input1').value;
}

3. 为第一个输入框添加一个事件监听器，当用户在第一个输入框输入时，自动调用syncInputs函数：

document.getElementById('input1').addEventListener('input', syncInputs);

现在，当用户在第一个输入框输入内容时，第二个输入框会自动显示相同的内容。点击“同步输入”按钮后，两个输入框会交换内容。