原生js input一个值改变时自动修改另一个input的值

解答思路

可以监听 input 或 change 事件来感知值的变化，两者触发时机不同；对于需要兼容旧版 IE 的场景，还需要额外处理 propertychange 事件；更通用的做法是引入“数据绑定”的思想，用 getter/setter 统一管理数据变化。

详细说明

• input 事件：值每次发生变化（包括打字过程中）就会触发，反馈更及时。
• change 事件：一般要等失去焦点或提交后才触发，反馈相对滞后。
• 在旧版 IE 中，input 事件支持不完整，需要额外监听 propertychange 事件作为兼容方案，避免某些输入方式（如粘贴、拖拽）不触发 input 的问题。
• 更进一步的方案是做“数据绑定”：定义一个数据对象，通过 Object.defineProperty 给字段配置 getter/setter；当某个 input 的值变化时，去修改这个对象对应的属性，触发 setter，在 setter 内部统一把新值同步给所有绑定了该字段的 input，从而实现多个输入框联动更新。

小结

简单场景下监听 input/change 事件并互相赋值即可；如果输入框较多、联动关系复杂，推荐抽象出一层基于 getter/setter 的数据绑定机制，让 UI 与数据解耦，减少手写事件处理的复杂度。