在 jQuery 中克隆包含动态修改或新增的 input 元素时，原生 DOM 克隆（如 clone()）不会自动同步用户输入的 value 属性到 HTML 属性中，导致克隆结果仍显示初始 value 或为空；需手动将当前输入值同步至 value 特性（attribute）才能确保克隆一致性。
在 jquery 中克隆表单元素时，原生 dom 克隆（如 clone()）不会自动同步用户输入的 value 属性到 html 属性中，导致克隆结果仍显示初始 value 或为空；需手动将当前输入值同步至 value 特性（attribute）才能确保克隆一致性。
当使用 $('html').clone() 或 $('form').clone() 等方式复制 DOM 时，jQuery 默认执行的是「浅克隆」——它会复制元素的 HTML 结构及初始属性（attributes），但不会反映运行时的 DOM 属性（properties） 变化。而用户在 中键入的内容会实时更新其 value property（可通过 inp.value 读取），但该变化不会自动写回 value attribute（即 HTML 中的 value="..."）。因此，克隆后的元素仍保留原始 HTML 的 value 属性值（如空字符串或初始设定值），而非用户当前输入内容。
✅ 正确解决方案是：在用户输入过程中，主动将当前 value property 同步为 value attribute。推荐使用 input 事件（兼容实时输入、粘贴、删除等所有变更）进行监听并更新：
// 在页面初始化时绑定（建议置于 $(document).ready() 内）
$(document).on('input', 'input, textarea, select', function () {
const $this = $(this);
// 将当前输入值写入 value attribute（对 input/textarea 有效）
$this.attr('value', $this.val());
// 对于 select，可额外处理 selected 属性（非必需，克隆时 option.selected 已被保留）
});
⚠️ 注意事项：
- 不要使用 change 事件替代 input：它仅在失焦或回车时触发，无法捕获实时编辑；
- attr('value', ...) 是关键：它修改的是 HTML attribute，克隆时才会被保留；prop('value', ...) 仅影响 runtime property，对克隆无效；
- 若涉及自定义组件或富文本编辑器，需单独处理其数据同步逻辑；
- 对于已存在的 input（如页面加载后未触发过 input 事件），可在克隆前执行一次批量同步（见下文增强版）。
? 增强实践：兼顾初始化与按需同步
若需在点击按钮时一次性保证所有 input 值最新（避免依赖全局监听），可在克隆前主动刷新：
$('.output').on('click', function () {
// 1. 强制同步所有 input/textarea 的当前值到 value attribute
$('input, textarea').each(function () {
$(this).attr('value', $(this).val());
});
// 2. 执行克隆（此时 value attribute 已是最新的）
const htmlCopy = $('html').clone();
// 3. 安全提取 input 值（推荐：优先读取 .val()，克隆后也可用 attr('value')）
htmlCopy.find('input').each((i, inp) => {
console.log('Cloned input value:', $(inp).val()); // ✅ 正确反映用户输入
});
// 后续处理 htmlCopy...
});
? 总结：DOM attribute 与 property 的分离是前端常见陷阱。克隆操作依赖 attribute，而用户交互更新的是 property。建立二者间的显式同步机制（通过 input 事件或克隆前批量赋值），是确保动态表单克隆数据一致性的核心实践。
