Wyłączenie Textarea z CSS

Question

W celu wyłączenia textarea (lub jakikolwiek inny element input), można:

• W HTML, można napisać: <textarea id='mytextarea' disabled></textarea>

• Z jQuery, można : $("#mytextarea").attr("disabled","disabled");

• CSS? Czy można wyłączyć tekst z CSS?

Answer 1

Możesz sprawić, że tekst będzie wyglądał na wyłączony, ale nie możesz go wyłączyć.

Korzystanie JavaScript, wszystko tak naprawdę robi modyfikuje ten sam atrybut DOM, który jest ustawiony przez atrybut HTML disabled, więc za pomocą HTML i JavaScript jesteś zasadniczo robi to samo. Jednak CSS jest całkowicie poza tym obrazem, ponieważ nie manipuluje DOM w żaden sposób - wszystko, co kontroluje, to wygląd (wizualny lub inny) elementu, a nie jego zachowanie.

Answer 2

Niestety w czystym CSS niestety ... trzeba użyć Javascript.

Answer 3

Nie, nie można tego zrobić w CSS. Ale możesz ustawić wejście jako "wyłączone" w CSS i użyć właściwości maxlength = "0" w kodzie HTML, aby ludzie nie mogli w nim pisać. Pamiętaj też, aby zmienić styl wskaźnika na właściwy, aby ludzie nie zobaczyli wskaźnika, który kazałby im pisać w polu.

Answer 4

CSS dotyczy stylów. Wyłączenie elementu jest funkcjonalne.

Oczywiście CSS staje się bardziej funkcjonalny w takich sytuacjach jak przejścia i jest to szara strefa. Ale celem CSS jest utrzymywanie go jako stylu, a nie kontrolowanie kontroli funkcjonalnej elementu.

Nie, css nie może wyłączyć elementów.

Możesz "sfałszować" wyłączone sterowanie stylem, aby wyglądało na wyłączone.

Answer 5

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

Sposób działania jest taki. Za każdym razem, gdy użytkownik próbuje wprowadzić cokolwiek, używamy jquery do przechwycenia zdarzenia. Następnie mówimy wydarzenie, że nie chcemy, aby zachował się domyślnie. Jak mówię, to jest hack, ale jest skuteczny w szczypta.

Answer 6

W projekcie mam pojemnik z tekstem i przyciskami wewnątrz. Aby wyłączyć całość I dołączania klasę do niego za pomocą następującego kodu:

.disabled { 
    opacity: 0.3; 
} 
.disabled:after { 
    width: 100%; 
    height: 100%; 
    position: absolute; 
} 

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

Podczas gdy zmętnienie jest tylko dla pojawienia się,: po elementem jest wykonywanie pracy. Wszystkie elementy w kontenerze nie reagują już na klikanie i przesuwanie kursora myszy (dotarcie do nich z tabulatorem nadal będzie działać). Dla moich potrzeb iw moim przypadku to działa dobrze i jest łatwym hackem.

Answer 7

<textarea placeholder="This is a textarea, and it is not clickable" style="pointer-events: none"></textarea> 

Można dokonać elementy całkowicie unclickable z 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>