本文介绍如何在页面加载时自动将文本输入框的初始值同步到隐藏输入框，并在用户后续编辑时持续保持两者的值一致，避免仅依赖 keyup 事件导致的初始化遗漏问题。
本文介绍如何在页面加载时自动将文本输入框的初始值同步到隐藏输入框，并在用户后续编辑时持续保持两者的值一致，避免仅依赖 keyup 事件导致的初始化遗漏问题。
在 Web 表单开发中，常需将一个可见的文本输入框（<input type="text">）的值实时反映到同名/同 ID 的隐藏输入框（<input type="hidden">）中，尤其在需要提交复合数据（如 id,value 格式）的场景下。但仅使用 keyup 事件存在明显缺陷：页面初次加载时若文本框已预填数据库值，隐藏框不会自动更新，导致提交数据丢失原始内容。
正确做法应分为两个阶段处理：
-
页面加载时立即同步初始值
在$(document).ready()中直接读取文本框当前值，并写入隐藏框； -
后续所有变更实时响应
使用更健壮的'input'事件（而非keyup），它覆盖键盘输入、粘贴、拖放、语音输入及鼠标右键修改等所有值变更场景。
以下是优化后的完整实现（注意：PHP 变量 $data['name'] 和 $data['id'] 需在服务端正确输出为 JS 字符串，建议使用 json_encode() 防 XSS）：
$(document).ready(function() {
const fieldName = <?php echo json_encode($data['name']); ?>;
const fieldId = <?php echo json_encode($data['id']); ?>;
const $textInput = $(`input:text[name="${fieldName}"]`);
const $hiddenInput = $(`input:hidden[id="${fieldName}"]`);
// ✅ 步骤1：页面加载时立即同步初始值
const initialTextValue = $textInput.val();
$hiddenInput.val(`${fieldId},${initialTextValue}`);
// ✅ 步骤2：监听所有输入变更（包括粘贴、删除、自动填充等）
$textInput.on('input', function() {
const currentValue = $(this).val();
$hiddenInput.val(`${fieldId},${currentValue}`);
});
});
⚠️ 关键注意事项：
- 避免直接拼接 PHP 变量到 JS 字符串（如原代码中的
'".$data['name']."'），易引发语法错误或 XSS 漏洞；务必使用json_encode()安全转义； -
'input'事件比'keyup'更可靠——它在<input>值真正变化后触发，而keyup仅响应按键抬起，无法捕获粘贴或剪贴板操作； - 若文本框支持
readonly或disabled，需额外判断其状态，避免对不可编辑字段误操作； - 多个同类字段共存时，建议为每个字段添加唯一 data 属性（如
data-sync-target="hidden-id-1"），提升可维护性。
通过以上方案，无论用户是否手动编辑，隐藏输入框始终与文本框保持「初始化即同步 + 变更即更新」的一致性，确保表单数据完整、安全、可靠。
