jQuery 克隆 HTML 时， 的 value 属性不会自动同步用户实时输入内容，导致克隆结果仍保留初始 value 属性值或为空；需在 DOM 更新时主动将 e.target.value 同步回 value 属性。
jquery 克隆 html 时，`` 的 `value` 属性不会自动同步用户实时输入内容，导致克隆结果仍保留初始 `value` 属性值或为空；需在 dom 更新时主动将 `e.target.value` 同步回 `value` 属性。
在 Web 表单开发中，尤其是涉及动态增删、编辑输入框的场景（如表单克隆、多行配置项、问卷生成器），一个常见却易被忽视的问题是：使用 .clone() 方法复制 DOM 时，用户已输入的内容无法保留在克隆结果中。
根本原因在于：HTML 元素的 value 属性（attribute） 与 值（property） 是两个不同概念：
- value 属性（element.getAttribute('value')）仅反映初始 HTML 中声明的值（如 ），DOM 加载后不再随用户输入自动更新；
- value 属性（property）即 element.value，是 JavaScript 运行时维护的实时值，用户每次输入都会更新它，但该值不会反向写回 value 属性。
因此，当你执行 $('html').clone() 时，jQuery 克隆的是当前 DOM 结构及其属性快照，而非运行时状态—— 的 value 属性仍为初始值或空字符串，而 element.value 中的真实输入数据被丢弃。
✅ 正确解法：在用户输入过程中，主动将 element.value 同步回 value 属性，确保克隆时能捕获最新状态。
推荐使用事件委托监听 input 事件（覆盖输入、粘贴、删除等所有值变更场景）：
// 在文档就绪后注册全局监听（建议放在 $(document).ready() 内）
$(document).on('input', 'input, textarea, select', function () {
const $el = $(this);
// 将实时 property 值写入 attribute，供 clone 使用
$el.attr('value', $el.val());
});? 注意：input 事件比 change 更及时（后者仅在失焦/回车时触发），更适合实时同步；同时扩展至 textarea 和 select 可覆盖常见表单控件。
随后，你的克隆逻辑即可正常获取最新值：
$('.output').on('click', function () {
const htmlCopy = $('html').clone();
htmlCopy.find('input, textarea, select').each(function () {
console.log('Element:', this);
console.log('Current value (attr):', $(this).attr('value')); // ✅ 已同步
console.log('Current value (prop):', $(this).val()); // ✅ 一致
});
// 此时 htmlCopy 可安全用于序列化、提交、导出等操作
});⚠️ 重要注意事项：
- 避免重复绑定：若页面存在多次初始化逻辑，需确保该 input 监听器只注册一次，否则会导致属性被多次覆盖或性能损耗；
- contenteditable 元素不适用此方案，需单独处理 textContent 或 innerHTML；
- 若使用原生 JS（非 jQuery），可直接操作 el.setAttribute('value', el.value)，原理相同；
- 对于受控组件（如 React/Vue），应优先通过框架状态管理导出数据，而非依赖 DOM 克隆。
总结：DOM 克隆 ≠ 状态克隆。要让克隆“记住”用户输入，关键不是修改克隆逻辑，而是在输入发生时，让 DOM 属性持续镜像运行时值——这既是 HTML 规范的约束，也是前端状态同步的经典实践。
