web-dev-qa-db-fra.com

Il est possible de développer une zone de texte uniquement avec CSS?

J'ai un textarea avec 200px de hauteur, mais quand je passe ce 200px avec le texte, je veux avoir la textarea étendue au lieu de garder les 200px de hauteur avec une barre de défilement.

Il est possible de faire cela uniquement avec CSS?

htmlcsshtml5css3
50
swayziak

Au lieu de textarea, vous pouvez utiliser div avec contentEditable attribut:

div {
  display: inline-block;
  border: solid 1px #000;
  min-height: 200px;
  width: 300px;
}
<div contentEditable="true"></div>

[~ # ~] démonstration [~ # ~]

69
Engineer

Il est possible de créer une zone de texte extensible par l’utilisateur, en utilisant simplement CSS. En fait, dans certains navigateurs modernes, une telle extensibilité est même la valeur par défaut du navigateur. Vous pouvez le demander explicitement:

textarea { resize: both; }

La prise en charge du navigateur augmente mais reste limitée.

Il n’ya généralement qu’un petit indice sur la redimensionnement: une poignée de redimensionnement dans le coin inférieur droit. Et je crains que la plupart des utilisateurs ne comprennent pas cet indice.

Vous ne pouvez pas développer une zone de texte automatiquement en utilisant uniquement du contenu CSS.

6
Jukka K. Korpela

Non, il n'est pas possible de le faire uniquement avec css, mais vous pouvez utiliser jquery:

$('#your_textarea').on('keydown', function(e){
    var that = $(this);
    if (that.scrollTop()) {
        $(this).height(function(i,h){
            return h + 20;
        });
    }
});
4
user1317647