Html 从 CSS 禁用 Textarea
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/9911122/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Disabling Textarea from CSS
提问by bArmageddon
In order to disable a textarea (or any other input element), you can:
为了禁用文本区域（或任何其他输入元素），您可以：
In HTML, you can write:
<textarea id='mytextarea' disabled></textarea>From jQuery, you can:
$("#mytextarea").attr("disabled","disabled");CSS? Is it possible to disable the textarea with CSS?
在 HTML 中，您可以编写：
<textarea id='mytextarea' disabled></textarea>从 jQuery，您可以：
$("#mytextarea").attr("disabled","disabled");CSS？是否可以使用 CSS 禁用 textarea？
回答by BoltClock
You can make a textarea appear disabled, but you can't actually disable it.
您可以使 textarea 显示为禁用，但实际上无法禁用它。
Using JavaScript, all you're really doing is modifying the same DOM attribute that's set by the HTML disabledattribute, so using HTML and JavaScript you're essentiallydoing the same thing. CSS, however, is completely out of this picture, as it doesn't do DOM manipulation of any sort — all it controls is the appearance (visual or otherwise) of an element, not its behavior.
使用 JavaScript，您真正要做的就是修改由 HTMLdisabled属性设置的相同 DOM属性，因此使用 HTML 和 JavaScript，您实际上是在做同样的事情。然而，CSS 完全不属于这种情况，因为它不进行任何类型的 DOM 操作——它所控制的只是元素的外观（视觉或其他），而不是它的行为。
回答by Fabian
In a Project I have a container with a textarea and some buttons inside. To disable the whole thing I append a class to it with the following code:
在一个项目中，我有一个容器，里面有一个 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>
While the opacity is only for the show, the :after element is doing the work. All elements in the container are no longer reacting to click and mouseover (reaching them with the tabulator will still work though). For my needs and in my case this works fine and is an easy css hack.
虽然不透明度仅用于显示，但 :after 元素正在完成工作。容器中的所有元素都不再对单击和鼠标悬停做出反应（尽管使用制表符到达它们仍然有效）。对于我的需要，在我的情况下，这很好用，并且是一个简单的 css hack。
回答by jmbertucci
CSS deals with styles. Disabling an element is functional.
CSS 处理样式。禁用元素是有效的。
Of course, CSS is becoming more functional with things like transitions and that's more of a grey area. But the purpose of CSS is to keep it as styles and not to control element functional control.
当然，CSS 正变得越来越实用，比如过渡，这更多是一个灰色区域。但是CSS的目的是保持样式，而不是控制元素功能控制。
No, css cannot disable elements.
不，css 不能禁用元素。
You can "fake" a disabled control styling it to visually look disabled.
您可以“伪造”禁用控件的样式，使其在视觉上看起来像禁用。
回答by Malte Schulze-Boeing
<textarea placeholder="This is a textarea, and it is not clickable" style="pointer-events: none"></textarea>
You can make elements completely unclickable with css: point-events: none;
您可以使用 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>回答by David Bélanger
No, it cannot be done in CSS. But, you can style the input as "disabled" in CSS and use the property maxlength="0" in the HTML code so people won't be able to write in it. Also, be sure to change the pointer style as the right one so people won't see the pointer that tell them to write in the box.
不，它不能在 CSS 中完成。但是，您可以在 CSS 中将输入样式设置为“禁用”，并在 HTML 代码中使用属性 maxlength="0" 以便人们无法在其中进行书写。此外，请务必将指针样式更改为正确的样式，这样人们就不会看到指示他们在框中书写的指针。
回答by Paul Grimshaw
Not possible in pure CSS unfortunately... you'd have to use Javascript.
不幸的是，在纯 CSS 中不可能......你必须使用 Javascript。
回答by Jalkin
Here is a hack.
这是一个黑客。
<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>
The way it works is this. Whenever the user tries to enter anything, we use jquery to catch the event. Then we tell the event we don't want it to do its default behavior. As I say its a hack but its an effective one in a pinch.
它的工作方式是这样的。每当用户尝试输入任何内容时，我们都会使用 jquery 来捕获该事件。然后我们告诉事件我们不希望它执行其默认行为。正如我所说，它是一种黑客行为，但在紧要关头却是一种有效的方法。
回答by Mujtaba Haroon
Agreed with above answers "Not possible in pure CSS unfortunately" But if You can make parent element pointer events none then it will do the job but it can be reversed from inspect elements
同意上述答案“不幸的是，在纯 CSS 中不可能”但是如果您可以使父元素指针事件无，那么它将完成这项工作，但可以从检查元素中反转
<div class="disabled">
<textarea></textarea>
<!-- textarea, buttons and other input elements -->
</div>
.disabled {
pointer-events: none;;
}
