Hauteur automatique des zones de texte

Question

Je veux que la hauteur de la zone de texte soit égale à la hauteur du texte qu'elle contient (et supprimer la barre de défilement).

HTML

<textarea id="note">SOME TEXT</textarea>

CSS

textarea#note {
    width:100%;
    direction:rtl;
    display:block;
    max-width:100%;
    line-height:1.5;
    padding:15px 15px 30px;
    border-radius:3px;
    border:1px solid #F7E98D;
    font:13px Tahoma, cursive;
    transition:box-shadow 0.5s ease;
    box-shadow:0 4px 6px rgba(0,0,0,0.1);
    font-smoothing:subpixel-antialiased;
    background:linear-gradient(#F9EFAF, #F7E98D);
    background:-o-linear-gradient(#F9EFAF, #F7E98D);
    background:-ms-linear-gradient(#F9EFAF, #F7E98D);
    background:-moz-linear-gradient(#F9EFAF, #F7E98D);
    background:-webkit-linear-gradient(#F9EFAF, #F7E98D);
}

JsFiddle : http://jsfiddle.net/Tw9Rj/

Answer 1

Ceci en utilisant du code JavaScript pur.

function auto_grow(element) {
    element.style.height = "5px";
    element.style.height = (element.scrollHeight)+"px";
}

textarea {
    resize: none;
    overflow: hidden;
    min-height: 50px;
    max-height: 100px;
}

<textarea oninput="auto_grow(this)"></textarea>

Answer 2

Pour ceux d'entre nous qui accomplissent ceci avec Angular JS, j'ai utilisé une directive

HTML :

<textarea elastic ng-model="someProperty"></textarea>

JS :

.directive('elastic', [
    '$timeout',
    function($timeout) {
        return {
            restrict: 'A',
            link: function($scope, element) {
                $scope.initialHeight = $scope.initialHeight || element[0].style.height;
                var resize = function() {
                    element[0].style.height = $scope.initialHeight;
                    element[0].style.height = "" + element[0].scrollHeight + "px";
                };
                element.on("input change", resize);
                $timeout(resize, 0);
            }
        };
    }
]);

$timeout met en file d'attente un événement qui se déclenchera après le chargement du DOM, ce qui est nécessaire pour obtenir la bonne hauteur de défilement (sinon vous obtiendrez undefined )

Answer 3

Cela peut être réalisé en utilisant JS. Voici un exemple en une ligne solution en utilisant elastic.js :

$('#note').elastic();

Mise à jour : Il semble que elastic.js ne soit plus là, mais si vous cherchez une bibliothèque externe, je peux vous recommander autosize.js par Jack Moore . Voici l'exemple de travail :

autosize(document.getElementById("note"));

textarea#note {
    width:100%;
    box-sizing:border-box;
    direction:rtl;
    display:block;
    max-width:100%;
    line-height:1.5;
    padding:15px 15px 30px;
    border-radius:3px;
    border:1px solid #F7E98D;
    font:13px Tahoma, cursive;
    transition:box-shadow 0.5s ease;
    box-shadow:0 4px 6px rgba(0,0,0,0.1);
    font-smoothing:subpixel-antialiased;
    background:linear-gradient(#F9EFAF, #F7E98D);
    background:-o-linear-gradient(#F9EFAF, #F7E98D);
    background:-ms-linear-gradient(#F9EFAF, #F7E98D);
    background:-moz-linear-gradient(#F9EFAF, #F7E98D);
    background:-webkit-linear-gradient(#F9EFAF, #F7E98D);
}

<script src="https://rawgit.com/jackmoore/autosize/master/dist/autosize.min.js"></script>
<textarea id="note">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</textarea>

Consultez également ces sujets similaires :

Autorisation de la zone de texte à l'aide de Prototype

Redimensionnement de la zone de texte en fonction de la longueur du contenu

Création d'une zone de texte avec redimensionnement automatique

Answer 4

J'ai utilisé jQuery AutoSize . Lorsque j'ai essayé d'utiliser Elastic, il me donnait fréquemment des hauteurs erronées (des zones de texte très hautes). jQuery AutoSize a bien fonctionné et n'a pas eu ce problème.

Answer 5

Je vois qu'on a déjà répondu à cette question, mais je pense avoir une solution simple à base de jQuery ( jQuery n'est même pas vraiment nécessaire ; j'aime juste l'utiliser ) :

Je suggère de compter les sauts de ligne dans le textarea et la mise en place du rows de l'attribut textarea en conséquence.

var text = jQuery('#your_textarea').val(),
    // look for any "\n" occurences
    matches = text.match(/\n/g),
    breaks = matches ? matches.length : 2;

jQuery('#your_textarea').attr('rows',breaks + 2);