从 CSS 中禁用 Textarea答案

【问题标题】：Disabling Textarea from CSS从 CSS 中禁用 Textarea
【发布时间】：2012-04-12 06:12:10
【问题描述】：

为了禁用文本区域（或任何其他输入元素），您可以：

在 HTML 中，您可以编写： <textarea id='mytextarea' disabled></textarea>
通过 jQuery，您可以： $("#mytextarea").attr("disabled","disabled");
CSS？是否可以使用 CSS 禁用文本区域？

【问题讨论】：

即使你可以，语义上 CSS 是用于显示，而不是行为，所以我会说 css 不是禁用东西的正确方法（如果你愿意，你可以使用 display:none 隐藏它）
@Mark 为什么？ disabled 是 textarea 的一个属性，bArmageddon 上面那行是正确的。
我不确定是否可以自动将禁用 textarea 视为行为，更多样式和 UI 会禁止用户插入输入。 disabled 除了防止和输入更改之外还有什么功能？这几天可能被认为是 UI 问题...
pointer-events: none; 应该停止在 Firefox 3.6+、Safari 3+ 和 Chrome 5+ 中单击文本区域。然后，您可以应用所有颜色效果。如果您的古玩，您可能会考虑将 javascript 放入 css 文件中，我认为这可能与 IE 的动态属性有关。但所有这些都是hackish！ :)
@Annan：不过，你仍然可以使用 tab 键。

【解决方案1】：

您可以使文本区域显示为已禁用，但实际上不能禁用它。

使用 JavaScript，您真正要做的只是修改由 HTML disabled 属性设置的同一个 DOM 属性，因此使用 HTML 和 JavaScript 您本质上在做同样的事情。然而，CSS 完全不在这幅画中，因为它不进行任何类型的 DOM 操作——它所控制的只是元素的外观（视觉或其他），而不是其行为。

【讨论】：

【解决方案2】：

在一个项目中，我有一个容器，里面有一个 textarea 和一些按钮。要禁用整个事情，我使用以下代码将一个类附加到它：

.disabled {
  opacity: 0.3;
}
.disabled:after {
    width: 100%;
    height: 100%;
    position: absolute; 
}

<div class="disabled">
    <textarea></textarea>
    <!-- textarea, buttons and other input elements -->
</div>

虽然不透明度仅用于显示，但 :after 元素正在发挥作用。容器中的所有元素不再对单击和鼠标悬停作出反应（尽管使用制表符到达它们仍然有效）。对于我的需要，在我的情况下，这很好用，并且是一个简单的 css hack。

【讨论】：

好主意。收藏。但是，您需要将 moz-use-focus 设置为忽略字段，否则用户可以进入它。

【解决方案3】：

CSS 处理样式。禁用元素是功能性的。

当然，CSS 在过渡之类的功能上变得越来越实用，而这更像是一个灰色区域。但 CSS 的目的是将其保留为样式，而不是控制元素的功能控制。

不，css 不能禁用元素。

您可以“伪造”禁用控件的样式，使其在视觉上看起来已禁用。

【讨论】：

【解决方案4】：

 <textarea placeholder="This is a textarea, and it is not clickable" style="pointer-events: none"></textarea>

您可以使用 css 使元素完全不可点击：point-events: none;

textarea {
  pointer-events: none;
  border: 1px solid #eee;
  padding: 20px;
}

&lt;textarea placeholder="This is a textarea, and it is not clickable"&gt;&lt;/textarea&gt;

【讨论】：

你仍然可以使用tab来选择
禁用选项卡选择：添加属性tabindex="-1"（例如使用JS）。不幸的是，不是 CSS...

【解决方案5】：

不，它不能在 CSS 中完成。但是，您可以在 CSS 中将输入设置为“已禁用”，并在 HTML 代码中使用属性 maxlength="0"，这样人们就无法在其中编写代码。另外，请务必将指针样式更改为正确的样式，这样人们就不会看到告诉他们在框中写字的指针。

【讨论】：

【解决方案6】：

#myTextarea{
    pointer-events: none;
}

&lt;textarea id="myTextarea"&gt;&lt;/textarea&gt;

【讨论】：

【解决方案7】：

不幸的是，在纯 CSS 中不可能……你必须使用 Javascript。

【讨论】：

【解决方案8】：

这是一个技巧。

<textArea class="tailLog">This page is waiting for something.</textArea>

<script type="text/javascript">
    $(document).ready(  function(){
            $(".tailLog").off().on("keydown", function(event){
                event.preventDefault();
                return;
            });
     });
</script>

它的工作方式是这样的。每当用户尝试输入任何内容时，我们都会使用 jquery 来捕获事件。然后我们告诉事件我们不希望它做它的默认行为。正如我所说，它是一种 hack，但它在紧要关头是一种有效的方法。

【讨论】：

【解决方案9】：

同意上述答案“不幸的是，在纯 CSS 中不可能” 但是，如果您可以将父元素指针事件设为无，那么它将完成这项工作，但可以从检查元素中反转

<div class="disabled">
 <textarea></textarea>
 <!-- textarea, buttons and other input elements -->
</div>

.disabled {
  pointer-events: none;;
}

【讨论】：