Question

我正在尝试“单一来源”可以处于编辑模式或查看模式的表单页面。由于各种原因，这不是使用ASP.Net FormView或DetailsView控件。

由于没有办法禁用文本框而不将其内容变为灰色（好吧，我们可以“吃掉”所有键盘，但这也不是很优雅）并且禁用下拉列表或列表框不是'我们想要的是，我们的第一个尝试是使用标签复制所有表单输入控件，并使用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");
});

Answer 1

这可能不适合您的需求，但这是可能的。

＆LT;输入＆GT;和＆lt; textarea＆gt;标签支持只读属性。只读字段的行为与禁用字段略有不同。以下是HTML 4.01 Recommendation所说的内容：

设置后，readonly属性对元素具有以下影响：

只读元素获得焦点，但用户无法修改标签导航中包含只读元素只读元素可能会成功。（“成功”表示它将作为参数提交。）

另一个关键区别是具有此属性的元素可以根据您的喜好进行样式设置。（例如，您可以删除或更改边框和背景。）因此，您只需添加或删除只读属性，而无需创建新元素和复制属性。

然后，您可以为这些字段创建一个样式“input [readonly] {}”。当然注意到流行的IE版本会忽略CSS中的属性选择器。（所以也许只需定义一个你添加和删除的类。）

Answer 2

为什么不使用像Jeditable这样的编辑插件。这样，您可以生成视图模式，并通过单击按钮使每个字段都可编辑。

Answer 3

当我完成此操作时，我不得不在您描述时“吃掉”每次击键并将其镜像到一个“隐藏”的span标记中，该标记反映了<input或<select元素。 span标签都有一个css类，它使用媒体选择器设置为仅显示打印，输入有一个css类，其风格仅显示在屏幕上。

如果您不介意静态宽度不能缩放到文本大小，您也可以设置<input标签的样式，以便不显示打印边框，但这非常难看。 / p>

如何使用jQuery切换<label>，<div>或<span>的文本框？</span> </div> </label>

3 个答案: