使用 CSS 禁用文本框

Posted 2023-03-05

技术标签:

【中文标题】使用 CSS 禁用文本框【英文标题】：Disable a textbox using CSS 【发布时间】：2011-01-28 08:27:22 【问题描述】：

如何在 CSS 中禁用文本框？目前，我们的视图中有一个文本框，可以根据模型中的属性启用/禁用它。我们有 asp.net MVC 视图；根据 Model 属性的值，我们需要渲染文本框或只读文本框。我们正在考虑通过将 CSS 应用于视图控件来做到这一点。以前有人做过吗？

【问题讨论】：

请注意readonly 和disabled 之间存在细微差别。在这两种情况下，该值都是不可编辑的，但前者无论如何都会将值发送到服务器端，而后者则不会。此外，后者在大多数网络浏览器中具有不同的（较暗/灰色）默认样式。 【参考方案1】：

&tl;dr：不，您不能使用 CSS 禁用文本框。

pointer-events: none 有效，但在 IE 上，CSS 属性仅适用于 IE 11 或更高版本，因此它不适用于每个浏览器的任何地方。除此之外，您不能使用 CSS 禁用文本框。

但是，您可以像这样禁用 html 中的文本框：

<input value="...." readonly />

但是，如果文本框在表单中，并且您希望文本框的值不提交，请改为这样做：

<input value="...." disabled />

所以这两个禁用文本框的选项之间的区别在于disabled 不允许您提交input 文本框的值，但readonly 允许。

有关这两者之间区别的更多信息，请参阅"What is the difference between disabled="disabled" and readonly="readonly"。

【讨论】：

【参考方案2】：

另一种方法是使其只读：

<input type="text" id="txtDis" readonly />

【讨论】：

在使用现有答案添加旧问题的答案时，有助于解释您的答案带来了哪些新方面，并确认时间的流逝是否会影响答案。并在适当的地方包含代码块。我能看到的唯一部分答案是“另一种方法是使其只读”。请解释您的答案的真正含义。 “另一种方法是使其只读”非常广泛。这不是一个真正的答案，这是一个部分的答案。添加更多内容以使其完整。这样的问题可以去掉吗？没有冒犯沉默战士，但在这种情况下，有很多其他“更高质量”的答案应该取代这个。【参考方案3】：

进一步了解 Pekka 的回答，我在一些文本框中有一个样式“style1”。您可以创建一个“style1[disabled]”，这样您就可以使用“style1”样式设置禁用的文本框：

.style1[disabled]  ...

在 IE8 上运行良好。

【讨论】：

style1 是一个糟糕的类名。它是由工具生成的吗？ @alex 哈哈不，这个名字是一种尴尬的 pt-br 字符串，所以我使用了“style1”。【参考方案4】：

您可以通过 css 禁用：

pointer-events: none;

但并非在任何地方都有效。

【讨论】：

文本输入仍然可以通过标签进入。 pointer-events: none 不受 IE 8、9 支持，仅在 10 中用于 SVG 元素，最终在 11 中受支持，根据 ***.com/questions/5855135/… 中的帖子谢谢！另一个提示是添加一些背景颜色以在视觉上进行更改，并在您无法控制 html 时帮助用户看到差异【参考方案5】：

试试这个。

<asp:TextBox ID="tb" onkeypress="javascript:return false;"  runat="server"></asp:TextBox>

这将不允许在文本框中输入任何字符。

【讨论】：

小心这个。用户仍然可以右键单击并从上下文菜单中选择粘贴来将数据粘贴到文本框中。【参考方案6】：

你不能用 CSS 禁用任何东西，这是一个功能问题。 CSS 适用于设计问题。通过在文本框上设置褪色的颜色，您可以给人一种文本框被禁用的印象。

要实际上禁用元素，你应该使用 disabled 布尔属性：

<input type="text" name="lname" disabled />

演示：http://jsfiddle.net/p6rja/

或者，如果您愿意，也可以通过 JavaScript 进行设置：

document.forms['formName']['inputName'].disabled = true;

演示：http://jsfiddle.net/655Su/

请记住，当您将数据发回服务器时，禁用的输入不会传递它们的值。如果您想保留数据，但不允许直接编辑它，您可能有兴趣将其设置为 readonly。

// Similar to <input value="Read-only" readonly>
document.forms['formName']['inputName'].readOnly = true;

演示：http://jsfiddle.net/655Su/1/

这不会改变元素的 UI，所以你需要自己做：

input[readonly]  
    background: #CCC; 
    color: #333; 
    border: 1px solid #666

您还可以定位任何禁用的元素：

input[disabled]  /* styles */

【讨论】：

【参考方案7】：

**只需复制粘贴此代码并运行即可看到文本框已禁用**

<html xmlns="http://www.w3.org/1999/xhtml">
<head><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title> 

<style>.containerfloat:left;width:200px;height:25px;position:relative;
       .container inputfloat:left;width:200px;height:25px;
       .overlaydisplay:block;width:208px;position:absolute;top:0px;left:0px;height:32px; 
</style>
 </head>
<body>
      <div class="container">
       <input type="text" value="rvi.tom@gmail.com" />
       <div class="overlay">
        </div>
       </div> 
</body>
</html>

【讨论】：

没有解释的代码在 Stack 上通常是一个糟糕的答案 无论如何，这对于大量代码来说几乎没有什么作用。它只会以一种相当混乱的方式呈现出被禁用的外观。如果开发人员认为这是有效的，他们可以很容易地使用input.disabled 并根据需要通过 javascript 添加类。您还可以在focus 到blur 上使用事件处理程序。轻松适应多个元素的解决方案。【参考方案8】：

CSS 不能禁用文本框，但是您可以关闭显示或可见性。