禁用CSS中的文本区域

Question

要禁用文本区域（或任何其他输入元素），可以采取以下措施：

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

• 使用jQuery，您可以： $("#mytextarea").attr("disabled","disabled");

• CSS？是否可以使用CSS禁用文本区域？

- bArmageddon

---

即使您可以这样做，从语义上讲CSS是用于显示而非行为的，因此我会说CSS不是禁用内容的适当方式（如果需要，可以使用 display:none 隐藏它）。 - Andreas Wong

@Mark为什么？disabled是textarea的一个属性，在bArmageddon中上面的那行是正确的。 - David Bélanger

pointer-events: none; 可以阻止在 Firefox 3.6+、Safari 3+ 和 Chrome 5+ 中单击文本区域。然后，您可以应用所有颜色效果。如果您好奇，可以考虑将 JavaScript 放入 CSS 文件中，我认为这在 IE 的动态属性中是可能的。但所有这些都是 hackish！ :) - AnnanFay

@Annan：不过你仍然可以通过制表键切换到它。 - BoltClock

@AnnanFay，你的想法在一些粗略的原型制作中帮了很大的忙 - 谢谢！ - Paracetamol

Answer 1

你可以让文本域看起来被禁用，但实际上你无法真正禁用它。

使用 JavaScript，你所做的只是修改与 HTML disabled 属性设置相同的 DOM 属性，因此使用 HTML 和 JavaScript 你基本上在做同样的事情。然而，CSS 完全不涉及这个问题，因为它不进行任何形式的 DOM 操作 - 它只控制元素的外观（视觉或其他），而不是它的行为。

- BoltClock

Answer 2

在一个项目中，我有一个带有文本区域和一些按钮的容器。为了禁用整个容器，我使用以下代码向其中添加一个类：

.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 技巧。

- Fabian

---

很好的想法。已收藏。但是您需要将moz-use-focus设置为忽略字段，否则用户可以通过Tab键进入它。 - Blargh

Answer 3

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

当然，CSS越来越功能化，像过渡这样的东西就更多地成为了灰色地带。但是CSS的目的是将其保持为样式，而不是控制元素的功能控制。

不，CSS不能禁用元素。

您可以通过给控件添加视觉上的禁用样式来“伪造”一个禁用的控件。

- jmbertucci

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>

- Malte Schulze-Boeing

---

你仍然可以使用tab键进行选择。 - Viliami

禁用使用 Tab 键选择：添加属性 tabindex="-1"（例如使用 JS）。不幸的是，不能使用 CSS... - Jack Miller

Answer 5

不，CSS无法做到这点。但是，您可以在CSS中将输入样式设置为“禁用”，并在HTML代码中使用属性maxlength =“0”，这样人们就无法在其中写入任何内容。此外，请确保更改指针样式为正确的样式，以便人们看不到提示他们在框中写入的指针。

- David Bélanger

Answer 6

#myTextarea{
    pointer-events: none;
}

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

- alwi nur nadzif

---

这样可以阻止用户通过点击来聚焦文本区域。但它并不能阻止用户使用其他方法（比如Tab键）来聚焦，也不能阻止文本区域成为一个成功的控件并提交其中的任何数据。 - Quentin

这也与之前的答案相同。 - Quentin

Answer 7

很遗憾在纯CSS中不可能做到...你需要使用Javascript。

- Paul Grimshaw

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来捕获事件。然后我们告诉事件，我们不希望它执行其默认行为。正如我所说，这是一种hack方法，但在紧急情况下非常有效。

- Jalkin

Answer 9

您可以在HTML中设置readonly属性，例如：

<textarea readonly>

这样就无法修改文本内容了。

- Ben Lloyd

---

那个 HTML 属性是HTML的，而不是 CSS（将某物设为只读与禁用它并不相同）。 - Quentin

Answer 10

同意以上答案，"纯CSS不可能实现"。但是如果您可以使父元素的指针事件为none，那么它将能够完成工作，但这可以通过检查元素来反转。

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

.disabled {
  pointer-events: none;;
}

- Mujtaba Haroon

---

pointer-events: none 通过点击禁止用户将焦点放在文本区域上。它并不阻止使用其他方法（如 Tab 键）来聚焦，也不会影响文本区域作为一个有效的控件并提交其中的任何数据。 - Quentin