本文介绍使用纯 JavaScript 实现表单中两个输入框的实时联动：当用户在第一个输入框中输入内容时，第二个输入框自动显示相同内容并追加一个减号（-），无需提交按钮或后端参与。
本文介绍使用纯 javascript 实现表单中两个输入框的实时联动：当用户在第一个输入框中输入内容时，第二个输入框自动显示相同内容并追加一个减号（`-`），无需提交按钮或后端参与。
在 Web 表单开发中，常需实现输入字段间的动态联动，例如将主输入值格式化后实时映射到辅助字段。本例聚焦于一种轻量、响应迅速的前端方案——利用 oninput 事件监听用户输入，并通过 DOM 操作即时更新目标字段。
以下是一个完整、可直接运行的 HTML 示例：
<meta charset="UTF-8"><title>输入值实时带负号同步</title><style>
.text_box { padding: 6px; border: 1px solid #ccc; border-radius: 4px; font-size: 14px; }
</style><label>原始输入：</label>
<input type="text" id="field1" class="text_box" placeholder="在此输入..."><br><br><label>同步输出（自动添加 '-'）：</label>
<input type="text" id="field2" class="text_box" readonly><script>
const field1 = document.getElementById('field1');
const field2 = document.getElementById('field2');
field1.addEventListener('input', function() {
// 注意：此处为“追加减号”，即 value + '-'；如需“前置负号”（如 -123），请改用 '-' + this.value
field2.value = this.value + '-';
});
</script>
✅ 关键说明：
- 使用 input 事件（而非 change）确保实时响应每一次按键、粘贴、删除等操作；
- readonly 属性防止用户误改第二字段，保持数据来源唯一性；
- 若实际需求是数值取负（如输入 123 → 输出 -123），应改为 field2.value = '-' + parseFloat(this.value) || '';，并增加类型校验；
- PHP 在本场景中无需介入——所有逻辑由前端完成，更高效、低延迟；若后续需提交该值，只需确保 field2 有 name 属性（如 name="formatted_value"）即可被 PHP 接收。
? 进阶提示：如需支持双向同步、防抖处理、或兼容旧版 IE，可引入 setTimeout 防抖或降级使用 onpropertychange，但现代项目推荐以 input 事件为基础进行扩展。
