本文介绍如何在 JavaScript 中构建两个文本输入框，绑定同一个数值变量，支持百分比（如 20）与小数（如 0.2）双向实时同步，并避免事件递归触发，同时兼顾用户交互（Enter/Tab）与程序化赋值（如 input.value = x）的一致行为。
本文介绍如何在 javascript 中构建两个文本输入框，绑定同一个数值变量，支持百分比（如 20）与小数（如 0.2）双向实时同步，并避免事件递归触发，同时兼顾用户交互（enter/tab）与程序化赋值（如 `input.value = x`）的一致行为。
在实际开发中，常需为同一数值提供多种格式的用户界面入口——例如一个表示透明度的数字，既允许用户以 50（百分比）输入，也支持 0.5（归一化浮点数）；或温度值同时显示摄氏与华氏。核心挑战在于：既要响应用户手动输入（change 事件），又要支持代码主动修改任一输入框时自动同步另一方，且不引发无限递归或状态不一致。
关键设计原则是：将状态更新逻辑抽离为单一可信源（Single Source of Truth）函数，而非在每个事件处理器中重复赋值和计算。以下是一个健壮、可复用的实现方案：
const in_perc_tf = document.getElementById("perc");
const in_rel_tf = document.getElementById("rel");
let mynum_perc = 20; // 内部统一存储为整数百分比（0–100）
// ✅ 核心同步函数：唯一负责更新状态与 DOM 的入口
function update(integerPercent) {
// 1. 更新内部状态（唯一真相源）
mynum_perc = Math.max(0, Math.min(100, Math.round(integerPercent))); // 可选：范围约束
// 2. 同步更新两个输入框的 value 属性（不触发 change 事件）
in_perc_tf.value = mynum_perc;
in_rel_tf.value = (mynum_perc / 100).toFixed(3); // 保留三位小数，避免浮点误差显示
}
// ✅ 用户交互事件处理器：仅解析输入并调用 update
in_perc_tf.addEventListener("change", (e) => {
const val = parseInt(e.target.value, 10);
if (!isNaN(val)) update(val);
});
in_rel_tf.addEventListener("change", (e) => {
const val = parseFloat(e.target.value);
if (!isNaN(val)) update(Math.round(val * 100));
});
// ✅ 初始化 + 支持任意时刻程序化更新
update(mynum_perc);
// 示例：1秒后将值设为 40（自动同步两个输入框）
setTimeout(() => update(40), 1000);
<input type="text" id="perc" placeholder="e.g., 75"><input type="text" id="rel" placeholder="e.g., 0.75">
为什么这样能避免递归？
因为 update() 函数只修改 .value 属性，不触发 change 事件（DOM 属性赋值默认不派发用户交互事件）。而 change 事件仅由用户显式提交（Enter/Tab/失焦）触发，两者完全解耦。这从根本上杜绝了 perc_change → update → rel.value=... → rel_change → update → ... 的死循环。
进阶建议：
- 若需实时反馈（如输入过程中即同步），可将 change 替换为 input 事件，但需增加防抖（debounce）避免高频计算；
- 对于更复杂场景（多单位、自定义格式化），可封装为 Class 或使用响应式框架（如 Vue 的 v-model + 计算属性）；
- 搜索关键词推荐：bidirectional number binding, dual-format input sync, synchronized form controls JavaScript —— 这些术语比“linked text field”更易定位专业库（如 Formik 配合自定义 Field 或轻量库 react-number-format 的思路可迁移至原生 JS）。
该模式简洁、无依赖、符合现代前端“状态驱动视图”的设计思想，适用于任何需要多视图映射同一数据源的场景。
