Textarea Automatická výška

Chcem, aby sa výška textového poľa rovnala výške textu v ňom (a odstrániť posuvník)

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/

Moussawi7
Edited question 28 december 2015 в 12:19
Programovanie
javascript html css
21 júl 2013 в 12:19
17 zobrazenia
Riešenie

Možno to dosiahnuť pomocou JS. Tu je 'jednoriadkové' [riešenie][1] pomocou [elastic.js][2]:

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

Aktualizované: Ak hľadáte externú knižnicu, môžem vám odporučiť [autosize.js od Jacka Moora][3]. Toto je funkčný príklad:

V tomto prípade je potrebné, aby ste si mohli vybrať, či chcete použiť autosize, alebo nie, ale aby ste si mohli vybrať, či chcete použiť autosize, alebo nie;

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.
Community
Edited answer 23 máj 2017 в 12:10
Komentáre (10)

Vidím, že na túto otázku už bolo odpovedané, ale verím, že mám jednoduché riešenie jQuery ( jQuery ani nie je naozaj potrebné, len ho rád používam ):

Navrhujem spočítať zalomenia riadkov v texte textarea a podľa toho nastaviť atribút rows v textarea.

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);
Rust
Edited answer 22 august 2016 в 7:13
Komentáre (3)

[Jsfiddle][1]

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%;    
}

alebo javascript

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

[Jsfiddle][2]

Sebastian
Edited answer 24 január 2014 в 9:30
Komentáre (3)