How can I auto fit/resize a html5 textarea element to fit the initial content?
Question
Goal:
I'm looking for a way in javaScript/jQuery to size a textarea so that it initially shows all of its text content, hide the vertical scrollbar, and show the resize handle.
The code that is below, first shows the textarea with some content,but not enough that the vertical scrollbar appears. This would be fine, except I want the textarea to look like this no matter how much text it contains, that is showing no vertical scrollbar.
When you click the button, more text is added and the vertical scrollbar shows, which is what I to avoid when I say initially when there is too much content -- the textarea should expand to fit it, which I try to do with the next two button clicks.
Clicking the button again causes the textarea to widen, so that none of the current lines wrap.
Clicking the button again, now causes the textarea to grow taller so the vertical scrollbar no longer shows.
However, the textarea grows too much and a gap shows between the last line of text and the bottom line of the textarea. Not what I want.
If the textarea's scrollHeight represents the whole height of the contents of the textarea, and there are no empty lines at the bottom, why is there a gap?
const text = 'This is a line of text'; var $textarea = $( '#example' ); var i = 0; $textarea.val( $textarea.val() + text ); for( var l = i + 5 ; i < l; ++i ) $textarea.val( $textarea.val() + "\\r\\n" + text + '(' + i + ')' ); function doIt( This ) { if( This.innerText !== 'Click Me Again' ) { for( var l = i + 5 ; i < l; ++i ) $textarea.val( $textarea.val() + "\\r\\n" + text + '(' + i + ')' ); if( This.innerText === 'Click Me' ) { This.innerText = 'Click Me Again'; $( 'p' ).text( 'to make the textarea\\s width wider.' ); } else { $textarea.css( 'height', 'auto' ); // As per Mr Khan's sugestion. $textarea.css( 'height', $textarea[ 0 ].scrollHeight + 'px' ); $( 'p' ).html( '<b>Why is there space below the last line of text?</b>' ); } } else { This.innerText = 'Click Me Some More'; $textarea.css( 'width', ( $textarea.width() + 36 ) + 'px' ); $( 'p' ).text( 'to make the textarea\\'s height taller and add more text.' ); } }
#example { width: 185px; height: 100px; overflow: auto; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-type" content="text/html; charset=utf-8"> <title>jQuery getScrollBarWidth example</title> </head> <body> <h1>Snippet Example</h1> <button onclick="doIt( this );">Click Me</button><br /> <p>to add more text to the textarea.</p> <textarea id="example"></textarea> </body> </html>
Update The codePen works for up to 1000 lines when the Rows option is used. After 999 lines then adjusting the textarea's rows attribute no longer works because each row wraps to two lines, so after 999, the rows would probably need to add 2 to the rows attribute (not tested) to prevent the vertical scrollbar from showing, but up to 999 lines is most likely good enough for almost any situation. Thank you.
1 answers
solution1
4 ACCPTED 2020-03-26 19:39:52
Just set the height to auto before setting scrollheight and you are good to go
$textarea.css( 'height', 'auto' );
$textarea.css( 'height', $textarea[ 0 ].scrollHeight + 'px' );
Working Example:
const text = 'This is a line of text'; var $textarea = $( '#example' ); var i = 0; $textarea.val( $textarea.val() + text ); for( var l = i + 5 ; i < l; ++i ) $textarea.val( $textarea.val() + "\\r\\n" + text + '(' + i + ')' ); $textarea.css( 'height', 'auto' ); //==========> Add this here $textarea.css( 'height', $textarea[ 0 ].scrollHeight + 'px' ); //==========> Add this here function doIt( This ) { if( This.innerText !== 'Click Me Again' ) { for( var l = i + 5 ; i < l; ++i ) $textarea.val( $textarea.val() + "\\r\\n" + text + '(' + i + ')' ); if( This.innerText === 'Click Me' ) { This.innerText = 'Click Me Again'; $( 'p' ).text( 'to make the textarea\\s width wider.' ); } else { $textarea.css( 'height', 'auto' ); // As per Mr Khan's sugestion. $textarea.css( 'height', $textarea[ 0 ].scrollHeight + 'px' ); $( 'p' ).html( '<b>Why is there space below the last line of text?</b>' ); } } else { This.innerText = 'Click Me Some More'; $textarea.css( 'width', ( $textarea.width() + 36 ) + 'px' ); $( 'p' ).text( 'to make the textarea\\'s height taller and add more text.' ); } }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <button onclick="doIt( this );">Click Me</button><br /> <p>to add more text to the textarea.</p> <textarea id="example"></textarea>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.