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>

Answer 5

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

Answer 6

#myTextarea{
    pointer-events: none;
}

<textarea id="myTextarea"></textarea>

Answer 7

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

Answer 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来捕获事件。然后我们告诉事件我们不希望它做它的默认行为。正如我说它是一个黑客，但它是一个有效的捏。

Answer 9

同意以上回答“不幸的是，纯CSS无法实现” 但是，如果您不能使父元素指针事件发生，那么它将完成工作，但是可以从检查元素中撤消

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

.disabled {
  pointer-events: none;;
}

从CSS禁用Textarea

9 个答案: