本文介绍一种简洁可靠的 javascript 方案，通过封装统一更新函数避免递归调用，使两个输入框（如百分比与小数格式）在用户交互或程序赋值时均能实时、安全地双向同步。
本文介绍一种简洁可靠的 javascript 方案，通过封装统一更新函数避免递归调用，使两个输入框（如百分比与小数格式）在用户交互或程序赋值时均能实时、安全地双向同步。
在构建表单时，常需对同一数值提供多种显示/输入格式——例如一个表示透明度的数字，既需以 0–100 的整数百分比形式呈现，也需支持 0.0–1.0 的浮点相对值输入。理想情况下，无论用户修改哪个输入框，或代码中动态设置任一字段的值，另一字段都应自动响应并保持数学一致性，且不触发无限递归更新。
核心挑战在于：原生 input.value = x 赋值不会触发 change 事件，因此仅靠事件监听无法捕获程序化修改；而若在事件处理器中直接修改另一字段的 value，又极易因未屏蔽自身触发而导致死循环（A → B → A → …）。
✅ 正确解法是将状态更新逻辑抽离为单一可信入口函数（如 update()），该函数负责：
- 更新内部状态变量（如 mynum_perc）；
- 同步写入两个 DOM 输入框的 value 属性；
- 不触发任何事件监听器（因赋值本身不派发事件，且我们主动避免在 update() 内调用 dispatchEvent）。
以下是完整、健壮的实现：
<input type="text" id="perc" placeholder="Percent (0–100)"> <input type="text" id="rel" placeholder="Relative (0.0–1.0)">
const in_perc_tf = document.getElementById("perc");
const in_rel_tf = document.getElementById("rel");
let mynum_perc = 20; // 内部统一存储为整数百分比（0–100）
// ✅ 唯一可信更新入口：同步状态 + DOM，无事件副作用
function update(integerPercent) {
// 确保输入合法：截断到 [0, 100] 范围
integerPercent = Math.max(0, Math.min(100, Math.round(integerPercent)));
mynum_perc = integerPercent;
in_perc_tf.value = integerPercent;
in_rel_tf.value = (integerPercent / 100).toFixed(2); // 保留两位小数，提升可读性
}
// 用户输入处理：解析后交由 update 统一调度
function perc_change(event) {
const val = parseInt(event.currentTarget.value, 10);
if (!isNaN(val)) update(val);
}
function rel_change(event) {
const val = parseFloat(event.currentTarget.value);
if (!isNaN(val)) update(Math.round(val * 100));
}
// 绑定用户交互事件
in_perc_tf.addEventListener("change", perc_change);
in_rel_tf.addEventListener("change", rel_change);
// 初始化显示
update(mynum_perc);
// ✅ 程序化更新示例：任意时刻调用 update 即可同步双字段
setTimeout(() => update(75), 1000); // 1秒后设为75%
setTimeout(() => update(0), 2000); // 2秒后设为0%⚠️ 关键注意事项：
- 绝不直接操作 .value 并期望事件自动触发：in_perc_tf.value = 50 是静默赋值，必须显式调用 update(50)；
- 输入校验必不可少：parseInt/parseFloat 可能返回 NaN，需防御性检查；
- 范围约束建议加入：防止用户输入超限值（如 -200 或 150），保证数据一致性；
- 精度处理需明确：0.333... 转百分比后取整可能引入舍入误差，可根据业务决定是否保留小数位（如 toFixed(2)）；
- 扩展性提示：此模式可轻松适配其他单位转换（如 ℃/℉、米/英尺），只需修改 update() 中的换算逻辑。
该方案彻底规避了递归风险，兼顾用户操作（Enter/Tab/失焦）与程序控制，是构建高可靠性双格式输入组件的推荐实践。
