使文本输入字段看起来处于禁用状态，但只执行readonly

Question

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

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

感谢。

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

Answer 1

以下是解决方法：您已根据需要禁用输入（仅用于显示值），并且具有您需要的名称和值的隐藏输入。

Answer 2

我在JSF中遇到了类似的问题，其中隐藏字段用于保存我需要的值，但是如果在提交时表单验证失败，则readonly或disabled输入字段中的值将被清除。我发现了一个替代解决方案，它似乎工作得相当优雅，让输入字段在技术上可编辑，但是一旦获得焦点就会通过模糊来阻止编辑。虽然您在服务器端环境中可能没有遇到与JSF相同的问题（即使从仅标记为readonly的输入字段也不提交值），您可能可以在您的情况下使用相同的技术，结果是你不需要一个单独的隐藏字段来保持价值。然而，与第二个答案一样，它没有解决使字段看起来被禁用的问题，至少没有一些额外的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

Answer 3

你可以使用css使它看起来像你想要的，虽然这可能与浏览器/平台上的其他禁用字段不匹配。

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

Answer 4

我知道这已被回答，但我想给我的CSS示例。

因为当我在寻找解决方案时，如何设置输入字段的样式以使其看起来像被禁用，我总是得到一个类似于此的输入字段。

边界左边＆amp;顶部颜色较深等。所以使用这个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上看起来很不错，在其他浏览器上你需要修改颜色abit。就像在Firefox中一样，你也需要将颜色和背景颜色改为等。

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