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

Question

我有一个文本输入框。

<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; 

有没有设置或技巧可以实现这一点？我想使用标签来完成，但样式如何呢？如何转换它们？是否有更好的方法或只有这一种方法？

有没有设置或技巧可以实现这一点？我想使用标签来完成，但样式如何呢？如何转换它们？是否有更好的方法或只有这一种方法？

- Matt Elhotiby

Answer 1

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

不需要样式。

请查看MDN上的<input>元素属性

- BoltClock

---

如果你喜欢全部采用XML格式，可以使用readonly="readonly"，参考下面Stephan Muller的示例 :) - Algy Taylor

@Algy Taylor：是的，当最初的问题有一个错误的[xhtml]标签时，这就是原始答案中的内容，这让每个人都困惑哪个标准是有效的 :/ - BoltClock

有没有办法去掉当你在带有“readonly”属性的“textarea”上悬停时出现的红色圆圈？ - StealthTrails

@Shafizadeh - 不，这是一件好事。对于浏览器来说实现起来很困难，对于人们来说也很容易混淆。不要试图让一个简单的控件去完成复杂的任务。将输入分成几个部分，每个部分都简单明了（一个可编辑的控件，然后是一个不可编辑的HTML元素，再然后是另一个可编辑的控件）。 - ToolmakerSteve

如果您不希望该值被持久化，也请确保在服务器端进行检查。在浏览器的开发者工具中轻松删除属性，这将使输入字段再次可编辑。 - Kurt Van den Branden

Answer 2

您可以向输入框添加属性readonly：

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

更多信息： http://www.w3schools.com/tags/att_input_readonly.asp

- Stephan Muller

---

只读属性不适用于隐藏的输入 - Mahmoud Magdy

readonly属性无法与隐藏输入框一起使用。 - undefined

Answer 3

你可以使用 readonly 属性，如果你只想让输入框被读取而不能更改。而如果你想要将输入框显示出来但完全禁用（甚至处理像PHP这样的语言也无法读取它们），则可以使用 disabled 属性。

- tomsseisums

---

当您将表单发送到php文件时，它不会读取已禁用的输入。这可能是他的意思。 - Carlos2W

实际上，当您提交表单时，禁用的输入框根本不会被发送，这与PHP、JS或任何其他东西无关。 - vasilevich

Answer 4

仅为完善现有答案：

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

在这里可以找到很好的解释：
HTML表单输入字段中disabled =“disabled”和readonly =“readonly”的区别是什么？

如何使用：

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

如这里所解释的那样，也有一些通过CSS或JavaScript来解决的方案。

- jsidera

---

如果你要使用/>来闭合你的标签，你也可以将属性扩展为disabled="disabled"和readonly="readonly"。 - BoltClock

Answer 5

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

pointer-events: none;

- saadk

Answer 6

添加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版本上运行。

- new QOpenGLWidget

Answer 7

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

您可以在https://www.w3schools.com/tags/att_input_readonly.asp中查看。

设置"readonly"的方法如下：

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

取消“readonly”（在jQuery中使用）：

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

- J. Fan

Answer 8

你只需要在末尾添加disabled即可。

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

- Michan

---

如果您将值设置为禁用，则不会提交该值。这可能是您需要的，但不是所要求的。顺便说一句，我来到这里正是因为我的“禁用”输入框的行为与我的预期不同。 - Balmipour

Answer 9

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

- Ahmed Raza

Answer 10

readonly 和 disabled 都可以使用。但如果你想发送输入值，只需使用 readonly 并编辑你的 CSS .field left:focus{ outline: none }

- krisssz