如何通过onchange事件实现field2同步镜像field1的任意输入值

现有代码的核心问题是写死了固定值匹配规则，只有输入内容等于预设的"Hello"才会同步，其他所有输入都会触发清空分支，完全达不到不限制输入内容的同步效果。

优化后的实现逻辑 #

整个同步逻辑根本不需要额外做固定值判断，直接在onchange事件回调里把field1的当前值赋值给field2即可，这个操作天然覆盖所有需求场景：

// 注意修正原代码中field1的拼写错误（原代码误写为filed1，少了字母l，容易导致元素获取失败报错）
const field1 = document.querySelector('#field1');
const field2 = document.querySelector('#field2');

// 绑定change事件
field1.onchange = function() {
  // 无任何判断条件，直接把field1的输入值传递给field2
  field2.value = field1.value;
}

方案覆盖的所有需求场景 #

• 输入"Mary"：field1的值为"Mary"，赋值后field2同步显示"Mary"
• 输入"Peanut Butter and Jelly"：field1的值为完整长文本，赋值后field2同步显示相同内容
• 清空field1所有输入：field1的值为空字符串，赋值后field2自然也为空

补充优化提示 #

如果需要在用户输入的过程中就实时同步内容（而非等输入框失焦触发change事件时才更新），可以把事件绑定从onchange替换为oninput，交互体验会更流畅。

内容的提问来源于stack exchange，提问作者T8100