如何使用jQuery切换<label>、<div>或<span>的文本框?

我们可以控制代码背后的可见性,以避免填充这两个控件,但我们仍然必须将它们都添加到表单中。

<label> , <div> <span> replace() jQuery方法动态交换元素。

问题是,我不仅需要复制内容,还需要复制原始输入控件的样式、属性和大小(在这一点上,我们只讨论文本框-对于下拉列表和列表框,我们有不同的解决方案)。

蛮力应该有效——“备份”输入控件的所有属性,创建新的“只读”元素,然后用新元素替换输入控件。我要找的是更简单的。

简而言之,使用jQuery,用标签替换文本框并使标签具有与文本框相同的内容和显示方式的最佳方法是什么?

$(":text").each( function() {
    var oldClass = $(this).attr("class");
    var oldId = $(this).attr("id");
    var oldHeight = $(this).outerHeight();
    var oldWidth = $(this).outerWidth();
    var oldStyle = $(this).attr("style");
    $(this).replaceWith("<div id='" + oldId + "'>" + $(this).val() + "</div>");
    $("div#" + oldId).attr("class", oldClass);
    $("div#" + oldId).attr("style", oldStyle);
    $("div#" + oldId).width(oldWidth);
    $("div#" + oldId).height(oldHeight);
    $("div#" + oldId).css("display", "inline-block");
});