8wDlpd.png
8wDFp9.png
8wDEOx.png
8wDMfH.png
8wDKte.png

document.cloneNode(true) 不会克隆用户输入

Mikko Rantalainen 2月前

19 0

我正在尝试使用 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'>

我是否必须手动设置每个输入字段的值?输入可能有多种类型,如复选框、日期等,因此我认为应该有更好的方法来实现这一点。

帖子版权声明 1、本帖标题:document.cloneNode(true) 不会克隆用户输入
    本站网址:http://xjnalaquan.com/
2、本网站的资源部分来源于网络,如有侵权,请联系站长进行删除处理。
3、会员发帖仅代表会员个人观点,并不代表本站赞同其观点和对其真实性负责。
4、本站一律禁止以任何方式发布或转载任何违法的相关信息,访客发现请向站长举报
5、站长邮箱:yeweds@126.com 除非注明,本帖由Mikko Rantalainen在本站《jquery》版块原创发布, 转载请注明出处!
最新回复 (0)
  • 尽管名称不同, 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>

    在该示例中,我获取了发生变化的值,但您也可以在克隆文档之前执行此操作。

返回
作者最近主题: