我正在尝试使用 document.cloneNode(true) 克隆/复制包含表单的现有 html 页面。当我将其序列化为字符串时，该字符串不包含用户输入。我有一个 js
我正在尝试 document.cloneNode(true) 克隆/复制包含表单的现有 html 页面。当我将其序列化为字符串时，该字符串不包含用户输入。
我在带有表单的 html 页面中嵌入了一个 js 脚本，并尝试使用它来 document.cloneNode(true) 克隆该页面、对其进行序列化并将其保存在 s3 存储桶中。当用户单击提交按钮时，js 函数将运行以克隆 html 页面。
问题是 cloneNode() 在克隆 HTML 页面时不包含用户输入。我查看了文档 - https://developer.mozilla.org/en-US/docs/Web/API/Node/cloneNode ，但没有找到此用例的处理方法。
cloneNode() 的这种行为是预期的吗？如果是，我该如何实现让用户输入如下的要求 -
<input type='text' value='John Doe'>
而不是
<input type='text'>
我是否必须手动设置每个输入字段的值？输入可能有多种类型，如复选框、日期等，因此我认为应该有更好的方法来实现这一点。
尽管名称不同， input 的值 value 并不反映在其 value 属性提供 默认值 ，而不是其当前值，即使 value 的 属性 HTMLInputElement 确实为您提供了当前值。这是关于 DOM 的令人困惑的事情之一。以下是细分：
| 物品 | 属性 | 财产 |
|---|---|---|
| 默认值 |
value
|
defaultValue
|
| 当前值 | p4 |
value
|
如果您想要一个 HTML 字符串来捕获用户在 input 元素上的当前输入文本（以及他们在元素上当前选择的项目 select ），那么您必须自己实现该功能，也许需要使用 data-* 属性。
以下是元素的一个简单示例 input ：
// Respond to the `input` event by updating an attribute on the
// input element
document.addEventListener("input", ({target}) => {
if (target instanceof HTMLInputElement) {
target.setAttribute("data-current-value", target.value);
}
});
// Hook up the button to show the HTML:
document.querySelector("[value='Show HTML']").addEventListener("click", () => {
for (const input of document.querySelectorAll("input[type=text]")) {
console.log(input.outerHTML);
}
});A: <input type="text" name="a">
<br>
B: <input type="text" name="b">
<br>
<div><input type="button" value="Show HTML"></div>在该示例中，我获取了发生变化的值，但您也可以在克隆文档之前执行此操作。