Voglio rendere l'altezza della textarea uguale all'altezza del testo al suo interno (e rimuovere la barra di scorrimento)
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:
Si può ottenere usando JS. Ecco una 'one-line' [soluzione][1] usando elastic.js:
$('#note').elastic();
{{{19587734}};
Aggiornato: Sembra che elastic.js non ci sia più, ma se state cercando una libreria esterna, posso raccomandare autosize.js di Jack Moore. Questo è l'esempio funzionante:
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>
Controlla anche questo argomento simile:
https://stackoverflow.com/questions/7477/autosizing-textarea-using-prototype
https://stackoverflow.com/questions/995168/textarea-to-resize-based-on-content-length
https://stackoverflow.com/questions/454202/creating-a-textarea-with-auto-resize
Vedo che questo è già stato risposto, ma credo di avere una semplice soluzione jQuery ( jQuery non è nemmeno veramente necessario; mi piace solo usarlo ):
Suggerisco di contare le interruzioni di riga nel testo della textarea
e impostare l'attributo rows
della textarea
di conseguenza.
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);
[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%;
}
o javascript
.
var s_height = document.getElementById('note').scrollHeight;
document.getElementById('note').setAttribute('style','height:'+s_height+'px');
[Jsfiddle][2]