本文介绍如何在页面加载时自动将文本输入框的初始值同步到对应隐藏输入框，并在用户编辑时实时更新，确保两者始终一致，避免因未触发事件导致隐藏字段为空的问题。
本文介绍如何在页面加载时自动将文本输入框的初始值同步到对应隐藏输入框，并在用户编辑时实时更新，确保两者始终一致，避免因未触发事件导致隐藏字段为空的问题。
在表单开发中，常需将一个可见文本输入框（<input type="text">）的值实时同步至同名/同ID的隐藏输入框（<input type="hidden">），用于提交后端处理（例如拼接ID与用户输入）。但仅依赖 keyup 或 change 事件存在明显缺陷：页面初次加载时，若文本框已预填数据库数据，隐藏字段却仍为空——因为用户未触发任何编辑操作，事件根本不会执行。
正确的解决方案需兼顾两个时机：
✅ 页面加载完成时：立即读取文本框当前值并写入隐藏字段；
✅ 用户实时输入时：使用更灵敏的 input 事件（兼容中文输入法，比 keyup 更可靠）持续同步。
以下是优化后的完整 jQuery 实现（注意：需确保 $data['name'] 和 $data['id'] 在服务端已正确注入）：
$(document).ready(function() {
const name = '<?php echo addslashes($data['name']); ?>';
const id = '<?php echo addslashes($data['id']); ?>';
const $textInput = $(`input:text[name="${name}"]`);
const $hiddenInput = $(`input:hidden[id="${name}"]`);
// 【关键】页面加载即同步初始值（处理数据库回显场景）
if ($textInput.length && $hiddenInput.length) {
const initialVal = $textInput.val();
$hiddenInput.val(`${id},${initialVal}`);
}
// 【关键】监听所有输入行为（含粘贴、删除、拼音输入等）
$textInput.on('input', function() {
const currentVal = $(this).val();
$hiddenInput.val(`${id},${currentVal}`);
});
});
⚠️ 注意事项：
- 使用
input事件而非keyup，可捕获粘贴（Ctrl+V）、剪切、拖拽、IME 输入等所有内容变更； - 服务端变量需通过
addslashes()转义，防止 JS 字符串注入（如单引号、换行符破坏语法）； - 添加
.length校验避免 DOM 元素不存在时报错； - 若隐藏字段需独立于文本框初始化（如仅在编辑时才启用），可将初始同步逻辑移至
if ($textInput.val().trim()) { ... }条件内。
此方案确保无论用户是否手动编辑，隐藏字段始终持有最新、完整的拼接值（ID,用户输入），大幅提升表单数据可靠性与用户体验一致性。
