Html 使文本输入字段看起来被禁用，但只读
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7743208/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Making a text input field look disabled, but act readonly
提问by numegil
I have an HTML input field that I want the user to be able to see, but not edit. If I mark the field as 'disabled', it doesn't get submitted along with the rest of the form. If I mark it as 'readonly', it behaves like what I want, but still looksenabled (at least on Chrome).
我有一个 HTML 输入字段，我希望用户能够看到但不能编辑。如果我将该字段标记为“已禁用”，则它不会与表单的其余部分一起提交。如果我将其标记为“只读”，它的行为就像我想要的那样，但看起来仍处于启用状态（至少在 Chrome 上）。
Basically, I want the input field to looklike a disabled field, but behaveas a readonly field. Is this possible?
基本上，我希望输入字段看起来像一个禁用字段，但表现为只读字段。这可能吗？
Thanks.
谢谢。
edit: Also, if I mark it as 'readonly', it's still possible to change its value by double clicking it, and selecting something that was previously there.
编辑：此外，如果我将其标记为“只读”，仍然可以通过双击它并选择以前存在的内容来更改其值。
采纳答案by simoncereska
Here is workaround: You have input disabled where you want ( just for displaying value ) and have a hidden input with name and value you need.
这是解决方法：您在需要的地方禁用了输入（仅用于显示值），并且有一个带有您需要的名称和值的隐藏输入。
回答by Kevin Rahe
I had a similar issue with JSF in which a hidden field worked for persisting the value I needed, but the value in a readonly or disabled input field would get cleared if validation of the form failed upon submission. I found an alternate solution that seems to work rather elegantly by leaving the input field technically editable, but which prevents editing by doing a blur as soon as it receives focus. While you may not have the same issue with your server-side environment that I did with JSF (which doesn't submit values even from input fields marked merely readonly), you might be able to use the same technique in your situation, with the upshot being that you then don't need a separate hidden field to persist the value. Like the second answer, however, it doesn't address the issue of making the field lookdisabled, at least not without some additional CSS code.
我在 JSF 中遇到了类似的问题，其中一个隐藏字段用于保存我需要的值，但是如果提交时表单验证失败，则只读或禁用输入字段中的值将被清除。我找到了一个替代解决方案，它似乎通过使输入字段在技术上可编辑而工作得相当优雅，但是一旦获得焦点就通过进行模糊来防止编辑。虽然您的服务器端环境可能没有我使用 JSF 时遇到的相同问题（即使从仅标记为只读的输入字段中也不会提交值），但您可能可以在您的情况下使用相同的技术，使用结果是您不需要单独的隐藏字段来保留该值。然而，就像第二个答案一样，它没有解决使字段看起来的问题禁用，至少不是没有一些额外的 CSS 代码。
The code in JSF:
JSF中的代码：
<p:inputText id="entid" value="#{RequestBean.entityID}" onfocus="blur();" />
which becomes the following HTML:
它变成了以下 HTML：
<input id="entid" type="text" value="10003" onfocus="blur();" />
You can see more on it here: How to persist JSF view parameters through validation
您可以在此处查看更多信息： 如何通过验证持久化 JSF 视图参数
回答by neurotik
You could use css to make it look however you want, although this may not match other disabled fields cross browser/platform.
您可以使用 css 使其看起来像您想要的那样，尽管这可能与跨浏览器/平台的其他禁用字段不匹配。
<input type="text" value="Sample text" readonly="readonly" style="color: #787878;"/>
回答by Devl11
I know this as been answered but wanted to give my CSS example.
我知道这已被回答，但想给出我的 CSS 示例。
Because when I was searching for a solution, how to style a input field so it looked like it was disabled, I always ended up with an input field looking like this.
因为当我在寻找解决方案时，如何设置输入字段的样式以使其看起来像是被禁用的，我总是以这样的输入字段结束。
With the border- left & top having a darker color etc. So a solved it using this CSS code.
边框左侧和顶部具有较深的颜色等。因此使用此 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;
}
Made an jsfiddleso you guys can take a closer look.
制作了一个jsfiddle，以便你们可以仔细看看。
It looks good on Chrome, on other browsers you need to modify the colors abit. Like in Firefox you need too change the color and Background-color to etc.
它在 Chrome 上看起来不错，在其他浏览器上你需要修改颜色。就像在 Firefox 中一样，您也需要将颜色和背景颜色更改为等。
background-color: rgb(240, 240, 240);
color: rgb(109, 109, 109);
