Disabling Textarea from CSS

问题:

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?

回答1:

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

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

回答2:

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:

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

回答3:

CSS deals with styles. Disabling an element is functional.

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.

No, css cannot disable elements.

You can "fake" a disabled control styling it to visually look disabled.

回答4:

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

textarea {
  pointer-events: none;
  border: 1px solid #eee;
  padding: 20px;
}

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

回答5:

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.

回答6:

Not possible in pure CSS unfortunately... you'd have to use Javascript.

回答7:

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.