web-dev-qa-db-fra.com

Hauteur automatique

Je veux que la hauteur de textarea soit égale à la hauteur du texte qu'il contient (et supprime 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/

javascripthtmlcss
133
Mohammad Mahdi Naderi

Cela peut être réalisé avec JS. Voici un 'une ligne' solution utilisant élastique.js :

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

Mise à jour: on dirait queastic.js n’est plus là, mais si vous cherchez une bibliothèque externe, je peux vous recommander autosize.js de 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>

Vérifiez également ces sujets similaires:

Autosizing textarea using Prototype

Textarea à redimensionner en fonction de la longueur du conten

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

37
Mike

Cela 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 onkeyup="auto_grow(this)"></textarea>
279
Moussawi7

Pour ceux d’entre nous qui accomplissons cela avec Angular, 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 le droit scrollHeight (sinon, vous obtiendrez undefined)

114
blockloop

J'ai utilisé jQuery AutoSize . Quand j'ai essayé d'utiliser Elastic, cela me donnait souvent de fausses hauteurs (très hautes textarea). jQuery AutoSize a bien fonctionné et n'a pas eu ce problème.

14
Peter

Je vois que cela répond déjà, mais je pense avoir une solution jQuery simple (jQuery n’est même pas vraiment nécessaire; j’apprécie simplement de l’utiliser):

Je suggère de compter les sauts de ligne dans le texte textarea et de définir l'attribut rows de 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);
9
Douglas.Sesar

Jsfiddle

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:-o-linear-gradient(#F9EFAF, #F7E98D);
    background:-ms-linear-gradient(#F9EFAF, #F7E98D);
    background:-moz-linear-gradient(#F9EFAF, #F7E98D);
    background:-webkit-linear-gradient(#F9EFAF, #F7E98D);
    background:linear-gradient(#F9EFAF, #F7E98D);
    height:100%;
}
html{
    height:100%;
}
body{

   height:100%;    
}

ou javascript

var s_height = document.getElementById('note').scrollHeight;
document.getElementById('note').setAttribute('style','height:'+s_height+'px');

Jsfiddle

5
Pumpkinpro
var minRows = 5;
var maxRows = 26;
function ResizeTextarea(id) {
    var t = document.getElementById(id);
    if (t.scrollTop == 0)   t.scrollTop=1;
    while (t.scrollTop == 0) {
        if (t.rows > minRows)
                t.rows--; else
            break;
        t.scrollTop = 1;
        if (t.rows < maxRows)
                t.style.overflowY = "hidden";
        if (t.scrollTop > 0) {
            t.rows++;
            break;
        }
    }
    while(t.scrollTop > 0) {
        if (t.rows < maxRows) {
            t.rows++;
            if (t.scrollTop == 0) t.scrollTop=1;
        } else {
            t.style.overflowY = "auto";
            break;
        }
    }
}
2
user3530437

html

<textarea id="wmd-input" name="md-content"></textarea>

js

var textarea = $('#wmd-input'),
    top = textarea.scrollTop(),
    height = textarea.height();
    if(top > 0){
       textarea.css("height",top + height)
    }

css

#wmd-input{
    width: 100%;
    overflow: hidden;
    padding: 10px;
}
0
emitle