有没有办法在 jQuery 或 javascript 中克隆表单字段值？

Posted 2023-02-22

【中文标题】有没有办法在 jQuery 或 javascript 中克隆表单字段值？

【英文标题】：Is there a way to clone form field values in jQuery or javascript?

【发布时间】：2011-03-16 02:35:01

【问题描述】：

jQuery 有一个clone() 函数，可以毫无问题地克隆实际表单，但它不会保留已输入到表单中的任何值。

有没有办法解决这个问题？

示例代码将不胜感激。

【问题讨论】：

你能提供更多的背景信息吗？快速测试在这里没有问题：jsfiddle.net/meGyg

我认为问题在于如果您通过表单更改数据，然后尝试克隆它。分叉你的小提琴：jsfiddle.net/F9aWu 尝试更改表单，然后单击克隆。

ya @[nick craver] 的解决方案工作正常，除了 textarea 部分

当我们开始直接修改value和checked等属性时，表单控件的初始表示与DOM不同步。当我们克隆一个节点时，每个 DOM 节点的表示都会被复制，其中不包括对象属性，例如 value。一种解决方案是将每个表单控件的相关属性（值、选中、选定）复制到克隆节点中。另一种是在进行更改时修改元素。因此，不要使用 element.val('something')，而是执行 element.setAttribute('value', 'something')，它应该在克隆时找到。

【参考方案1】：

遇到了同样的问题，简单的解决方法：

// touch all input values
$('input:text').each(function() 
    $(this).attr('value', $(this).val());
);

var clones = $('input:text').clone();

诀窍在于，这将改变 DOM 树中的实际“值”属性，否则您输入的“即时”数据仅存在于 DOM 的“状态”中

【讨论】：

这个不需要转义吗？

@ChrisStryczynski 我不这么认为，文本输入无法显示 html，您将其设置为之前已有的值，引号不是问题，因为您正在设置字符串属性值而不是打印纯 HTML 代码。

这对input:text有效，但是复选框、单选按钮、文本区域之类的呢？

【参考方案2】：

根据笔记，这里有一个解决方案。形式如下：

<form id="old">
    <textarea>Some Value</textarea>
    <input type="text" value="Some Value" />
    <input type="checkbox" value="bob" checked />
    <br />
</form>

<input type="button" value="Clone" id="clone" />

这个 jQuery 可以工作，包括 textareas：

$( 'input#clone' ).click(
    function()
    
      $( 'form#old textarea' ).text( $( 'form#old textarea' ).val() )
      $("form#old").clone().attr( 'id', 'new_form' ).appendTo("body")

    
)

​演示：http://jsfiddle.net/Jux3e/

【参考方案3】：

另一个解决 textarea 值不被克隆的简单方法是在 HTML 中包含以下 javascript 文件：https://github.com/spencertipping/jquery.fix.clone

它只是修补了克隆方法，因此您可以包含该文件，然后忘记它在那里。显然，克隆选择值也存在问题，同一个文件也解决了这个问题。

此文件链接至：http://bugs.jquery.com/ticket/3016。该错误已存在 4 年。

【参考方案4】：

你可以使用这个 jQuery 插件。

/**
 * clone element, including the textarea part
 */


$.fn.clone2 = function(val1, val2) 
    // ret for return value, cur for current jquery object
    var ret, cur;
    ret = $(this).clone(val1, val2);
    cur = $(this);

    // copy all value of textarea
    ret.find('textarea').each(function() 
        var value_baru;

        // use name attribute as unique id
        value_baru = sek.find('[name="$name"]'.replace('$name', $(this).attr('name')))
                        .val();

        // set the new value to the textarea
        $(this).val(value_baru);
    );

    // return val
    return ret;

【参考方案5】：

如果您需要复制字段本身，请检查这个小函数relCopy

【参考方案6】：

发现了这个问题，写了这个包装器：

$.fn.cloneField = function(withDataAndEvents) 
var clones = [];
this.each(function()
    var cln = $(this).clone(withDataAndEvents);
    cln.val($(this).val());
    clones.push(cln.get(0));
);
return jQuery( clones ); ; 

【参考方案7】：

使用此代码复制 textarea 值

clonedObject.find(textareaObject).val(originalObject.find(textareaObject).val());