如何使文本输入不可编辑？答案

【问题标题】：How do I make a text input non-editable?如何使文本输入不可编辑？
【发布时间】：2011-04-10 05:17:36
【问题描述】：

所以我有一个文本输入

<input type="text" value="3" class="field left">

这是我的 CSS

background:url("images/number-bg.png") no-repeat scroll 0 0 transparent;
border:0 none;
color:#FFFFFF;
height:17px;
margin:0 13px 0 0;
text-align:center;
width:17px;

这是否有设置或技巧，我正在考虑做一个标签，但样式怎么样。我该如何转换它们，有没有更好的方法还是唯一的方法？

【问题讨论】：

标签： html css html-input

【解决方案1】：

<input type="text" value="3" class="field left" readonly>

无需样式。

请参阅 MDN 上的 <input> https://developer.mozilla.org/en/docs/Web/HTML/Element/input#Attributes

【讨论】：

或 readonly="readonly" 如果你喜欢它全部是 XML-y，请参阅下面的 Stephan Muller 的示例 :)
@Algy Taylor：是的，当原始问题有一个任性的 [xhtml] 标记时，这就是原始答案，这让每个人都为哪个标准有效：/
有没有什么办法可以消除当您将鼠标悬停在带有readonly 属性的textarea 上时出现的红色圆圈？
@Shafizadeh - 不，这是一件好事。浏览器很难正确实现，并且让人难以理解。不要试图让一个简单的控件完成一项复杂的任务。将您的输入分成几部分，每一部分都很简单（一个可编辑的控件，然后是不可编辑的 HTML 元素，然后是另一个可编辑的控件）。
如果您不希望保留该值，请务必检查此服务器端。在浏览器的开发者工具中很容易删除该属性，这又使输入字段再次可编辑。

【解决方案2】：

您可以在输入中添加属性readonly：

<input type="text" value="3"
       class="field left" readonly="readonly">

【讨论】：

【解决方案3】：

如果您只想读取您的输入，您可以使用readonly 属性。你可以使用disabled属性，如果你想显示输入，但完全禁用（即使像PHP这样的处理语言也无法读取这些）。

【讨论】：

当您将表单发送到 php 文件时，它不会读取禁用的输入。这可能就是他的意思。
实际发生的是，当您提交表单时，禁用的输入甚至不会发送，与 php、js 或任何东西无关。

【解决方案4】：

只是为了完成可用的答案：

输入元素可以是只读的或禁用的（它们都不可编辑，但有一些区别：焦点，...）

可以在这里找到很好的解释：
What's the difference between disabled=“disabled” and readonly=“readonly” for HTML form input fields?

使用方法：

<input type="text" value="Example" disabled /> 
<input type="text" value="Example" readonly />

还有一些解决方案可以通过 CSS 或 JavaScript 实现，如 here 所述。

【讨论】：

如果你打算使用/>来关闭你的标签，你也可以将你的属性扩展到disabled="disabled"和readonly="readonly"。

【解决方案5】：

你只需要在最后加上disabled

<input type="text" value="3" class="field left" disabled>

【讨论】：

设置为禁用则不提交。这可能是你需要的，但不是被问到的。 作为旁注，我来到这里正是因为我的“禁用”输入的行为不像我预期的那样

【解决方案6】：

<input type="text" value="3" class="field left" readonly>

你可以在https://www.w3schools.com/tags/att_input_readonly.asp看到

设置“只读”的方法：

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

取消“只读”（在 jQuery 中工作）：

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

【讨论】：

【解决方案7】：

添加readonly:

<input type="text" value="3" class="field left" readonly>

如果您不希望在表单中提交值，请添加disabled 属性。

<input type="text" value="3" class="field left" disabled>

没有办法使用始终有效的 CSS。

为什么？ CSS 不能“禁用”任何东西。您仍然可以关闭显示或可见性并使用pointer-events: none，但pointer-events 不适用于早于 IE 11 的 IE 版本。

【讨论】：

【解决方案8】：

如果您真的想使用 CSS，请使用以下属性，该属性将使字段不可编辑。

pointer-events: none;

【讨论】：

【解决方案9】：

每个输入都必须具有只读或可编辑字段，因此请使用它

【讨论】：