使用 HTML 'readonly="readonly"' 与 JavaScript 'element.readOnly = true;' 的奇怪行为答案

【问题标题】：Strange behavior using HTML 'readonly="readonly"' vs. JavaScript 'element.readOnly = true;'使用 HTML 'readonly="readonly"' 与 JavaScript 'element.readOnly = true;' 的奇怪行为
【发布时间】：2009-06-29 20:58:36
【问题描述】：

一些背景

因此，我正在完成一些对数据进行自动插值的 Web 应用程序的增强。用户填写了一些文本框，它们之间的其他文本框具有自动计算的值。接收自动计算值的文本框必须是只读的以防止用户更改，但不能禁用，否则它们不会在回发时提交。每个文本框旁边还有一个复选框，因此用户可以有意识地选中它以使字段可写，从而允许他们覆盖插值。

浏览器：IE 7（不确定在其他浏览器中的表现如何）

问题

当使用 JavaScript 设置文本框的 readOnly 属性时，文本框中的值与表单一起提交：我可以在服务器端 (ASP.NET) 使用 myTextBox.Text 看到它，它在 Request.Form("myTextBox") .

如果我在 <asp:TextBox /> 元素上设置 ReadOnly="true" 并且不使用 JavaScript 方法，则文本框中的值是 NOT 可从 myTextBox.Text 获得（我假设它从未它进入ViewState)，但它正在与表单一起提交：Request.Form("myTextBox") 有一个值。

我的问题

这到底是怎么回事？这是设计使然吗？这是浏览器的问题吗？我发现错误了吗？令人讨厌的是，我必须有一些额外的 JavaScript 来在页面加载时禁用文本框的可写性以使我的应用程序正常工作。

谢谢！

【问题讨论】：

您能用您的 .aspx 文件样本更新您的问题吗？我刚刚构建了一个小测试（使用 VS2005，.NET 2.0），并在 .aspx 中设置了我仍然能够在代码隐藏中通过 txtTest.Text 提交表单时阅读它。

标签： asp.net javascript internet-explorer cross-browser readonly

【解决方案1】：

这是设计使然。作为一项 ASP.NET 安全功能，在服务器上将其设置为只读将使其保持只读状态，而不管客户端上发生什么。如果您希望他们能够覆盖它并实际提交一个值，那么它在服务器上并不是真正的只读，只是有条件地在客户端上。您可以在他们选中复选框以更改服务器上的只读属性时进行回发，或者使用此 ASP.NET 代码仅在客户端上设置只读属性：

MyControl.Attributes.Add("readOnly","readOnly")

【讨论】：

谢谢！现在说得通了；没有考虑 ASP.NET 服务器控件上的属性以及它们如何影响结果。
这就是我想说的，但没有说得非常好。 :)
我查看了 TextBox 的 ViewState，当您在代码隐藏中将其设置为只读时，回发后该项目的 ViewState 中少了一个项目（与回发后不是只读的文本框相比）。该值永远不会出现，因此 .Text 属性返回空值。
这都是好人，但如果文本框是 Gridview 或 Detailsview 的一部分，例如带有 edittemplates、inserttemplates、itemtemplates 等，它将不起作用。所以你不能放置 attributes.add( ) 在 page_load 中，因为控件尚未呈现。关于如何解决这个问题的任何想法？
@Fernando68，所以使用不同的事件。像这样的东西应该可以工作：GridView1_RowDataBound(object sender, GridViewRowEventArgs e) { if (e.Row.RowType == DataControlRowType.DataRow) { e.Row.FindControl("yourControl").Attributes.Add("readOnly","readOnly"); } }

【解决方案2】：

好的，我调整了我的示例，我认为我发现了问题 - 我可能是错的，但我认为它的行为符合预期。

当您在代码隐藏中将字段设置为只读时，ASP:TextBox 似乎变得不可变，即使是 JS。我进行了更改，更改反映在 JS 和表单中，但 TextBox 保留了它的原始文本值——除非我查看了请求。像你一样形成。

我不认为这是一个错误。我认为这是有意的，将某些东西完全锁定 - 在服务器端挂起的只读似乎是一个首选。

我可以建议使用隐藏的输入字段和跨度或ASP:Labels（有效地呈现为跨度）来提供用户无法调整的显示方面吗？

或者，如果您可以访问 JS 库（例如 jQuery），您可以在您的 TextBoxes 上设置一个 CSS 类（在您的标签中使用 CssClass="readonly" 或类似的东西），然后使用选择过程来调整属性，就像这样（假设 jQuery，很容易用其他语言编写）：

$("input.readonly").attr("readonly","readonly");

这样，您不会重写很多标记，而且这是一个快速的 JS 修复。

【讨论】：

我有一个使用您提供的一些简单 JS 的解决方法，因此找到解决方案不是问题。我只是想了解为什么在标记中设置 readonly="readonly" 和在同一个元素上但通过 DOM 设置 readOnly=true 之间存在差异。我不能使用标签，因为当用户选中它们旁边的复选框时，我会动态更改字段的只读性，本质上是允许自己进行编辑——我只是不希望它们意外覆盖值。跨度>