使文本输入框看起来像是被禁用了，但实际上是只读的

Question

我有一个HTML输入框，我希望用户可以看到它但不能编辑。如果我将该字段标记为“禁用”，则它不会随表单的其余部分一起提交。如果我将其标记为“只读”，它会表现出我想要的行为，但在Chrome上仍然看起来是启用状态。

基本上，我想让输入框看起来像一个禁用的输入框，但表现为只读输入框。这可能吗？

谢谢。

编辑：此外，如果我将其标记为“只读”，仍然可以通过双击它并选择之前存在的内容来更改其值。

- numegil

Answer 1

以下是解决方法：您可以在需要的位置禁用输入（仅用于显示值），并使用名称和所需值创建一个隐藏的输入。

- simoncereska

---

请注意，这并不能防止对表单进行篡改。这只是外观上的限制。因此，请参考此问题以保护免受篡改。 - Chris Wesseling

不够优雅 - 不是你的错！- 但可能是唯一的解决方案 - Chris Pink

不幸的是，你最终得到了一些额外的字段，这会导致问题（HDIV）。 - tad604

Answer 2

您可以使用CSS来使其看起来符合您的要求，但是这可能无法跨浏览器/平台匹配其他禁用字段。

<input type="text" value="Sample text" readonly="readonly" style="color: #787878;"/>

- neurotik

---

可以通过为所有表单元素设置样式来实现这一点。 - Chris Wesseling

Answer 3

我曾经遇到一个类似的JSF问题，其中隐藏字段可以持久化我需要的值，但如果表单提交时验证失败，只读或禁用输入字段中的值将被清除。我找到了一种替代方案，似乎非常优雅，即将输入字段技术上设置为可编辑状态，但通过在接收到焦点时执行模糊操作来防止编辑。虽然您的服务器端环境可能没有像我在JSF中遇到的那样的问题（即使只读标记的输入字段也不会提交值），但您可能可以在您的情况下使用相同的技术，好处是您随后就不需要一个单独的隐藏字段来持久化这个值。然而，与第二个答案一样，它并没有解决制造外观上“禁用”字段的问题，至少不能没有额外的CSS代码。

JSF的代码如下：

<p:inputText id="entid" value="#{RequestBean.entityID}" onfocus="blur();" />

变成如下的HTML：

<input id="entid" type="text" value="10003" onfocus="blur();" />

您可以在这里查看更多相关信息：如何通过验证保留JSF视图参数

- Kevin Rahe

Answer 4

我知道这个问题已经得到了解答，但我想提供我的 CSS 示例。

因为当我搜索如何为输入字段设置样式使其看起来像被禁用时，我总是得到一个看起来像这样的输入字段。

使用左边和上边的边框颜色较暗等方式来解决它。所以我使用了以下 CSS 代码来解决问题。

input[readonly]{
  border-color: darkgrey;
  border-style: solid;
  border-width: 1px;
  background-color: rgb(235, 235, 228);
  color: rgb(84, 84, 84);
  padding: 2px 0px;
}

我制作了一个jsfiddle，这样你们就可以更仔细地查看。

在Chrome上看起来很好，在其他浏览器上需要稍微修改一下颜色。例如，在Firefox中，您需要更改颜色和背景颜色等。

background-color: rgb(240, 240, 240);
color: rgb(109, 109, 109);

- Devl11

Answer 5

我遇到了同样的问题，我想禁用一个输入框，但是在提交表单时需要传递值。

以下CSS对我起到了预期的作用， pointer-events: none; background-color: #f1f1f2;

这将使输入框被禁用，并且在提交表单时也会传递值。

- Ivin Austan