由于没有办法禁用文本框而不将其内容变为灰色(好吧,我们可以“吃掉”所有键盘,但这也不是很优雅)并且禁用下拉列表或列表框不是我们的想要,我们的第一次尝试是使用标签复制所有表单输入控件,并使用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");
});
这可能不适合您的需求,但这是可能的.
<输入>和< textarea>标签支持只读属性.只读字段的行为与禁用字段略有不同.这是HTML 4.01 Recommendation所说的：
When set, the readonly attribute has the following effects on an element:
Read-only elements receive focus but cannot be modified by the user.
Read-only elements are included in tabbing navigation.
Read-only elements may be successful. (“Successful” means it will be submitted as a parameter.)
另一个关键区别是具有此属性的元素可以根据您的喜好进行样式设置. (例如,您可以删除或更改边框和背景.)因此,您只需添加或删除只读属性,而无需创建新元素和复制属性.
然后,您可以为这些字段“input [readonly] {}”创建样式.当然注意到流行的IE版本会忽略CSS中的属性选择器. (所以也许只需定义一个你添加和删除的类.)