blocks|key|233557|text|你可以让一个文本区显示为禁用，但你不能实际禁用它。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|233558|使用JavaScript，您真正要做的就是修改由HTML+disabled属性设置的相同的DOM属性，所以使用HTML和JavaScript实际上做的是相同的事情。然而，CSS完全不在这种情况下，因为它不做任何类型的DOM操作-它控制的只是元素的外观(可视的或其他的)，而不是它的行为。|offset|length|style|CODE|233559|entityMap^0|0|T|8|0^^$0|@$1|2|3|4|5|6|7|J|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|K|8|@$D|L|E|M|F|G]]|9|@]|A|$]]|$1|H|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|I|$]]

<p>You can make a textarea appear disabled, but you can't actually disable it.</p>

<p>Using JavaScript, all you're really doing is modifying the same DOM attribute that's set by the HTML <code>disabled</code> attribute, so using HTML and JavaScript you're <em>essentially</em> doing 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.</p>


blocks|key|3109420|text|在一个项目中，我有一个容器，里面有一个文本区域和一些按钮。为了禁用整个功能，我用下面的代码附加了一个类：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|3109421|.disabled+{
++opacity:+0.3;
}
.disabled:after+{
++++width:+100%25;
++++height:+100%25;
++++position:+absolute;+
}

<div+class="disabled">
++++<textarea></textarea>
++++
</div>|code-block|syntax|javascript|3109422|虽然不透明度仅用于显示，但:after元素正在执行此工作。容器中的所有元素都不再对单击和鼠标悬停做出反应(使用制表器到达它们仍然有效)。根据我的需要，在我的情况下，这很好用，而且是一个简单的css技巧。|3109423|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|L|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

<p>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:</p>

<pre><code>.disabled {
  opacity: 0.3;
}
.disabled:after {
    width: 100%;
    height: 100%;
    position: absolute; 
}

&lt;div class="disabled"&gt;
    &lt;textarea&gt;&lt;/textarea&gt;
    &lt;!-- textarea, buttons and other input elements --&gt;
&lt;/div&gt;
</code></pre>

<p>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.</p>


blocks|key|3109329|text|CSS处理样式。禁用元素是正常工作的。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|3109330|当然，CSS在过渡等方面变得越来越实用，这更像是一个灰色地带。但是CSS的目的是保持样式，而不是控制元素的功能控制。|3109331|不能，css不能禁用元素。|3109332|您可以“伪造”禁用的控件样式，使其在视觉上看起来是禁用的。|3109333|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|J|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|K|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|L|8|@]|9|@]|A|$]]|$1|F|3|G|5|6|7|M|8|@]|9|@]|A|$]]|$1|H|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|I|$]]

<p>CSS deals with styles.  Disabling an element is functional.  </p>

<p>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.  </p>

<p>No, css cannot disable elements.</p>

<p>You can "fake" a disabled control styling it to visually look disabled.</p>


blocks|key|233638|text|+<textarea+placeholder="This+is+a+textarea,+and+it+is+not+clickable"+style="pointer-events:+none"></textarea>|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|233639|您可以使用css：point-events:+none;使元素完全不可点击|unstyled|offset|length|style|CODE|233640|​|233641|textarea+{
++pointer-events:+none;
++border:+1px+solid+#eee;
++padding:+20px;
}|233642|<textarea+placeholder="This+is+a+textarea,+and+it+is+not+clickable"></textarea>|233643|233644|entityMap^0|0|9|J|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|T|8|@]|9|@]|A|$B|C]]|$1|D|3|E|5|F|7|U|8|@$G|V|H|W|I|J]]|9|@]|A|$]]|$1|K|3|L|5|F|7|X|8|@]|9|@]|A|$]]|$1|M|3|N|5|6|7|Y|8|@]|9|@]|A|$B|C]]|$1|O|3|P|5|6|7|Z|8|@]|9|@]|A|$B|C]]|$1|Q|3|L|5|F|7|10|8|@]|9|@]|A|$]]|$1|R|3|-4|5|F|7|11|8|@]|9|@]|A|$]]]|S|$]]

<pre><code> &lt;textarea placeholder="This is a textarea, and it is not clickable" style="pointer-events: none"&gt;&lt;/textarea&gt;
</code></pre>

<p>You can make elements completely unclickable with css: <code>point-events: none;</code></p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>textarea {
  pointer-events: none;
  border: 1px solid #eee;
  padding: 20px;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;textarea placeholder="This is a textarea, and it is not clickable"&gt;&lt;/textarea&gt;</code></pre>
</div>
</div>
</p>


blocks|key|230596|text|不，它不能在CSS中完成。但是，您可以在CSS中将输入样式设置为"disabled“，并在HTML代码中使用属性maxlength="0”，这样人们就不能在其中编写内容。此外，请确保将指针样式更改为正确的样式，这样人们就不会看到告诉他们在框中写入的指针。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|230597|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|D|8|@]|9|@]|A|$]]|$1|B|3|-4|5|6|7|E|8|@]|9|@]|A|$]]]|C|$]]

<p>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.</p>


blocks|key|2895629|text|​|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2895630|#myTextarea{
++++pointer-events:+none;
}|code-block|syntax|javascript|2895631|<textarea+id="myTextarea"></textarea>|2895632|2895633|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|L|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|M|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|D|7|N|8|@]|9|@]|A|$E|F]]|$1|I|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|J|3|-4|5|6|7|P|8|@]|9|@]|A|$]]]|K|$]]

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>#myTextarea{
    pointer-events: none;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;textarea id="myTextarea"&gt;&lt;/textarea&gt;</code></pre>
</div>
</div>
</p>


blocks|key|230593|text|不幸的是，在纯CSS中是不可能的。你必须使用Javascript。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|230594|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|D|8|@]|9|@]|A|$]]|$1|B|3|-4|5|6|7|E|8|@]|9|@]|A|$]]]|C|$]]

<p>Not possible in pure CSS unfortunately... you'd have to use Javascript.</p>


blocks|key|2895463|text|这里有一个技巧。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2895464|<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>|code-block|syntax|javascript|2895465|它的工作方式是这样的。每当用户尝试输入任何内容时，我们都会使用jquery来捕获事件。然后，我们告诉事件，我们不希望它执行其默认行为。正如我所说，这是一个技巧，但在紧要关头它是一个有效的。|2895466|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|L|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

<p>Here is a hack.</p>

<pre><code>&lt;textArea class="tailLog"&gt;This page is waiting for something.&lt;/textArea&gt;

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

<p>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.</p>


blocks|key|230733|text|同意上面的回答“不幸的是，在纯CSS中是不可能的”，但是如果你可以让父元素指针事件都不发生，那么它就可以完成这项工作，但是它可以从检查元素中颠倒过来。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|230734|<div+class="disabled">
+<textarea></textarea>
+
</div>

.disabled+{
++pointer-events:+none;;
}|code-block|syntax|javascript|230735|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>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</p>

<pre><code>&lt;div class="disabled"&gt;
 &lt;textarea&gt;&lt;/textarea&gt;
 &lt;!-- textarea, buttons and other input elements --&gt;
&lt;/div&gt;

.disabled {
  pointer-events: none;;
}
</code></pre>


<p>In order to disable a textarea (or any other input element), you can:</p>

<ul>
<li><p>In HTML, you can write:
<code>&lt;textarea id='mytextarea' disabled&gt;&lt;/textarea&gt;</code></p></li>
<li><p>From jQuery, you can:
<code>$("#mytextarea").attr("disabled","disabled");</code></p></li>
<li><p>CSS? Is it possible to disable the textarea with CSS? </p></li>
</ul>


Disabling Textarea from CSS

容器

jQuery

要禁用文本区域(或任何其他输入元素)，您可以：在超文本标记语言中，你可以写：<textarea id='mytextarea' disabled></textarea>From jQuery，你可以：$("#mytextarea").attr("disabled","disabled");CSS？是否可以使用CSS禁用文本区？

问从CSS禁用Textarea
EN

回答 9

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问从CSS禁用TextareaEN

回答 9

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问从CSS禁用Textarea
EN