web-dev-qa-db-fra.com

Désactiver Textarea de CSS

Afin de désactiver une zone de texte (ou tout autre élément d'entrée), vous pouvez:

  • En HTML, vous pouvez écrire: <textarea id='mytextarea' disabled></textarea>

  • Depuis jQuery, vous pouvez: $("#mytextarea").attr("disabled","disabled");

  • CSS? Est-il possible de désactiver la zone de texte avec CSS?

htmlcssinputtextarea
21
bArmageddon

Vous pouvez faire apparaître une zone de texte désactivée, mais vous ne pouvez pas réellement la désactiver.

En utilisant JavaScript, vous ne faites que modifier le même attribut DOM défini par l'attribut HTML disabled, donc en utilisant HTML et JavaScript, vous essentiellement faites la même chose. CSS, cependant, est complètement hors de cette image, car il ne fait aucune manipulation DOM de toute sorte - tout ce qu'il contrôle est l'apparence (visuelle ou autre) d'un élément, pas son comportement.

25
BoltClock

Dans un projet, j'ai un conteneur avec une zone de texte et quelques boutons à l'intérieur. Pour désactiver le tout, j'y ajoute une classe avec le code suivant:

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

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

Alors que l'opacité est uniquement pour le spectacle, l'élément: after fait le travail. Tous les éléments dans le conteneur ne réagissent plus au clic et au survol (les atteindre avec le tabulateur fonctionnera quand même). Pour mes besoins et dans mon cas, cela fonctionne bien et est un hack css facile.

9
Fabian

CSS traite des styles. La désactivation d'un élément est fonctionnelle.

Bien sûr, CSS devient plus fonctionnel avec des choses comme les transitions et c'est plus une zone grise. Mais le but de CSS est de le conserver en tant que styles et non de contrôler le contrôle fonctionnel des éléments.

Non, css ne peut pas désactiver les éléments.

Vous pouvez "simuler" un contrôle désactivé en lui donnant un aspect visuel.

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

Vous pouvez rendre des éléments complètement non cliquables avec 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>
6
Malte Schulze-Boeing

Non, cela ne peut pas être fait en CSS. Mais, vous pouvez styliser l'entrée comme "désactivée" en CSS et utiliser la propriété maxlength = "0" dans le code HTML pour que les gens ne puissent pas l'écrire. Assurez-vous également de changer le style de pointeur comme étant le bon afin que les gens ne voient pas le pointeur qui leur dit d'écrire dans la zone.

3
David Bélanger

Pas possible en CSS pur malheureusement ... il faudrait utiliser Javascript.

1
Paul Grimshaw

Voici un 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>

Voici comment cela fonctionne. Chaque fois que l'utilisateur essaie d'entrer quoi que ce soit, nous utilisons jquery pour attraper l'événement. Ensuite, nous disons à l'événement que nous ne voulons pas qu'il fasse son comportement par défaut. Comme je l'ai dit, c'est un hack mais c'est un outil efficace à la rigueur.

1
Jalkin

D'accord avec les réponses ci-dessus "Pas possible en CSS pur malheureusement"

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

.disabled {
  pointer-events: none;;
}
0
Mujtaba Haroon