从CSS禁用Textarea

Question

要禁用textarea(或任何其他输入元素),您可以:

• 在HTML中,您可以编写: <textarea id='mytextarea' disabled></textarea>

• 从jQuery,您可以: $("#mytextarea").attr("disabled","disabled");

• CSS？是否可以使用CSS禁用textarea？

Answer 1

您可以使textarea显示为禁用,但您实际上无法禁用它.

使用JavaScript,您真正要做的就是修改由HTML disabled属性设置的相同DOM 属性,因此使用HTML和JavaScript 实际上就是在做同样的事情.然而,CSS完全不在这个图片中,因为它不进行任何类型的DOM操作 - 它控制的只是元素的外观(视觉或其他),而不是它的行为.

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

虽然不透明度仅适用于show,但是:after元素正在完成工作.容器中的所有元素不再对单击和鼠标悬停做出反应(使用制表器到达它们仍然可以工作).对于我的需求和我的情况,这工作正常,是一个简单的CSS hack.

Answer 3

CSS处理样式.禁用元素是有效的.

当然,CSS变得越来越具有功能,比如转换,而这更像是一个灰色区域.但CSS的目的是将其保持为样式而不是控制元素功能控制.

不,css无法禁用元素.

您可以"伪造"禁用的控件,使其在视觉上看起来已禁用.

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

<textarea placeholder="This is a textarea, and it is not clickable"></textarea>