asp.net – 如何切换,或使用jQuery的文本框？

由于没有办法禁用文本框而不将其内容变为灰色(好吧,我们可以“吃掉”所有键盘,但这也不是很优雅)并且禁用下拉列表或列表框不是我们的想要,我们的第一次尝试是使用标签复制所有表单输入控件,并使用CSS根据表单的模式选择哪些是可见的.这是有效的,但编辑很难看,代码隐藏每次都要填充两个控件.

我们可以控制代码隐藏中的可见性以避免填充两个控件,但我们仍然必须将它们都添加到窗体中.

所以我有想法使用jQuery替换< 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");
});