通过原生 JavaScript 监听输入事件，可在用户键入时实时将第一个文本框的内容自动追加减号（-）并同步至第二个文本框，无需提交表单或刷新页面。
通过原生 javascript 监听输入事件，可在用户键入时实时将第一个文本框的内容自动追加减号（`-`）并同步至第二个文本框，无需提交表单或刷新页面。
在 Web 表单开发中，常需实现字段间的动态联动——例如将一个输入框的值经简单格式化（如添加前缀、后缀或符号）后实时反映到另一输入框中。本教程以“将第一个输入框内容实时带减号（-）同步至第二个输入框”为例，提供轻量、可靠、无需后端参与的纯前端解决方案。
✅ 实现原理
利用 HTML5 的 oninput 事件（区别于 onchange，它在每次输入内容变化时即时触发），结合 JavaScript 的 DOM 操作，获取源输入框（#field1）的当前值，并将其拼接减号后赋值给目标输入框（#field2）。
Ainee: AI Notetaker
下载
一款AI办公效率工具，主要用于Your ultimate AI-powered notetaking and learning companion.，适合需要提升相关任务效率的用户。
? 完整可运行示例代码
<meta charset="UTF-8"><title>输入值实时带减号同步</title><style>
.text_box { padding: 8px; 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>
function syncWithMinus(valueElement) {
const target = document.getElementById('field2');
// 注意：此处为「后缀」减号；若需「前缀」，改为 '-' + valueElement.value
target.value = valueElement.value + '-';
}
// 绑定事件监听（推荐使用 addEventListener 更规范）
const source = document.getElementById('field1');
source.addEventListener('input', () => {
syncWithMinus(source);
});
</script>
⚠️ 注意事项与优化建议
- 只读保护：目标输入框（#field2）建议添加 readonly 属性，防止用户误编辑，保持数据一致性；若需完全禁用交互，可用 disabled，但注意 disabled 字段值不会随表单提交。
-
空值处理：当前逻辑会将空字符串转为 -。如需避免，可增加判断：
target.value = valueElement.value ? valueElement.value + '-' : '';
- 性能与兼容性：oninput 在现代浏览器中广泛支持（IE9+），且比 onkeyup/onkeydown 更准确（覆盖粘贴、拖入、语音输入等所有修改场景）。
- PHP 的角色说明：本需求纯属前端交互，PHP 在此无需参与；若后续需提交该组合值，只需确保 #field2 有 name 属性（如 name="synced_value"），服务端即可通过 $_POST['synced_value'] 获取。
该方案简洁高效、零依赖、开箱即用，适用于各类动态表单场景。掌握此类事件驱动的 DOM 同步模式，是构建响应式 Web 表单的重要基础能力。
