使文本输入字段看起来被禁用，但只读

Posted 2023-02-22

【中文标题】使文本输入字段看起来被禁用，但只读

【英文标题】：Making a text input field look disabled, but act readonly

【发布时间】：2011-12-06 06:59:29

【问题描述】：

我有一个 html 输入字段，我希望用户能够看到但不能编辑。如果我将该字段标记为“已禁用”，则它不会与表单的其余部分一起提交。如果我将它标记为“只读”，它的行为就像我想要的那样，但仍然看起来启用（至少在 Chrome 上）。

基本上，我希望输入字段看起来 像一个禁用字段，但 表现 为只读字段。这可能吗？

谢谢。

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

【参考方案1】：

这里是解决方法：您在需要的地方禁用了输入（仅用于显示值），并有一个带有您需要的名称和值的隐藏输入。

【讨论】：

请注意，这并不能防止篡改表单。这一切都只是外表。因此，请参阅this question 以防止篡改。

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

不幸的是，您最终得到了导致问题 (HDIV) 的额外字段

【参考方案2】：

您可以使用 css 使其看起来像您想要的那样，尽管这可能与跨浏览器/平台的其他禁用字段不匹配。

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

【讨论】：

这可以通过设置所有表单元素的样式来实现。

【参考方案3】：

我在使用 JSF 时遇到了类似的问题，其中隐藏字段可用于保存我需要的值，但如果在提交时表单验证失败，则只读或禁用输入字段中的值将被清除。我找到了一个替代解决方案，通过让输入字段在技术上可编辑，它似乎工作得相当优雅，但它通过在收到焦点后立即进行模糊来防止编辑。虽然您的服务器端环境可能没有我对 JSF 所做的相同问题（即使从标记为只读的输入字段也不会提交值），但您可能可以在您的情况下使用相同的技术，使用结果是您不需要单独的隐藏字段来保留该值。然而，与第二个答案一样，它并没有解决禁用字段 look 的问题，至少在没有一些额外的 CSS 代码的情况下不会。

JSF中的代码：

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

变成下面的 HTML：

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

您可以在此处查看更多信息：How to persist JSF view parameters through validation

【参考方案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);