textarea根据内容js或jquery设置高度

Question

this is my code: (keep it simple)

<textarea style="height:100px;">
    $textareatext
</textarea>

• if $textareatext is 1 line long I want the height of textarea to fit
• if its 3, 5 or 10 lines...same thing.

The issue I am having is at 100px the height is too big, but if I set it to 20px and there are 10 lines then the textarea height is too small. NOTE: values are preloaded via mysql. so I think it should count the lines,then set the height based on how many lines? Any suggestions?

I use Javascript and jQuery, or anything you would suggest.

Thank you.

Answer 1

These may help. They're both jQuery plugins.

• jQuery Elastic
• Flexible Area
• Autogrow

Edit

var $textArea = $("#textarea-container");

resizeTextArea($textArea);

$textArea.off("keyup.textarea").on("keyup.textarea", function() {
    resizeTextArea($(this));
});

function resizeTextArea($element) {
    $element.height($element[0].scrollHeight);
}​

This answer was provided by François Wahl, below.

Answer 2

Remove the hard-coded height and give your textarea an id:

<textarea id="textarea-container">
    Line 1
    Line 2
    Line 3
    Line 4
</textarea>​

Using jQuery you can use the following to auto-resize at page load and then on the keuUp event as previously mentioned.

var $textArea = $("#textarea-container");

// Re-size to fit initial content as it is pre-loaded.
resizeTextArea($textArea);

// Remove this binding if you don't want to re-size on typing.
$textArea.off("keyup.textarea").on("keyup.textarea", function() {
    resizeTextArea($(this));
});

function resizeTextArea($element) {
    $element.height($element[0].scrollHeight);
}​

See DEMO

Alternatively if all you care about is displaying it and removing the default row padding use this:

var $textArea = $("#textarea-container");
var nativeRowPadding = 15;

// Re-size to fit initial content.
resizeTextArea($textArea);

function resizeTextArea($element) {
    $element.height($element[0].scrollHeight-nativeRowPadding );
}​

See DEMO

Answer 3

To make sure all your textareas keep up with their contents, increasing or decreasing height as you type, use the following:

$("textarea").on("input",function(){
   $(this).height("auto").height($(this)[0].scrollHeight);
}

it would actually be helpful to install this line of code on SO itself:)

Answer 4

Hey just the following 5 lines of code did the job for preloaded textareas

window.onload= function(){

    var inputs, index;

    inputs = document.getElementsByTagName('textarea');

    for (index = 0; index < inputs.length; ++index) 
    {
    inputs[index].style.height=inputs[index].scrollHeight + 5
    }

}

Answer 5

Multiple textarea support. Based off @François answer. Demo Fiddle

if ($(".textarea").length > 0) {
    $(".textarea").each(function () {
        resizeTextArea($(this));
        $(this).off("keyup.textarea").on("keyup.textarea", function () {
            resizeTextArea($(this));
        });
    });
}

function resizeTextArea($element) {
    $element.height($element[0].scrollHeight);
}

Answer 6

I made a OOP solution I use a lot:

$.fn.elasticHeight = function(){
    $( this ).height( 'auto' ).height( $( this )[ 0 ].scrollHeight );
    $( this ).on( "input", function(){
        $( this ).height( 'auto' ).height( $( this )[ 0 ].scrollHeight );
    } );
    return this;
};

then you just add the elasticHeight to your textarea like so:

$( "textarea" ).elasticHeight();

the return this is to make it bubble... so you can do this:

$( "textarea" ).elasticHeight().val( "default value" );

No need for fancy 3rd party plugins...

Answer 7

 const textarea = document.querySelector('textarea'); function updateHeight(el) { el.style.height = ''; el.style.height = el.scrollHeight + 'px'; } updateHeight(textarea); textarea.addEventListener('input', () => updateHeight(textarea));

 <textarea>Lorem ipsum dolor sit amet consectetur adipisicing elit. Qui, id? Aut dolorem nam iste. Asperiores minima nemo porro autem quidem. Quae quas dolore possimus sunt vitae quo ea incidunt. Sit repellendus at consequuntur fugiat quos, quisquam atque dolorem ipsa autem iure quod? Expedita eius cum asperiores obcaecati eaque laudantium libero aliquid ex doloremque modi incidunt, officiis velit reiciendis cupiditate necessitatibus harum quod repellendus officia quidem. Aliquid, temporibus. Nihil error cumque labore eius voluptas commodi accusamus eaque distinctio, facere dolores, Laudantium distinctio a quisquam quibusdam error nam quia ex cupiditate? fuga saepe maiores cumque enim corporis alias itaque recusandae vel! Omnis?</textarea>

Answer 8

<textarea id='myText'></textarea>

var obj=document.getElementById('myText');
obj.onkeyup=function(){
if(obj.scrollHeight>obj.offsetHeight)obj.style.height=obj.scrollHeight+'px';
}

I presume the user is typing into the textarea

Answer 9

The accepted code by François Wahl does not work when you are deleting lines in textarea - the height stays the same. Make sure you make textarea's height "auto" before getting it's scrollHeight:

function resizeTextArea($element) {
    $element.height("auto");
    $element.height($element[0].scrollHeight);
}

Answer 10

Most solutions are either not increasing AND decreasing the textarea height, OR too jumpy when you hit "Enter" to get to the next line, OR they are NOT working properly when the textarea height goes off the browser window limits.

Here is mine (Firefox, Chrome, Safari, Opera):

$('.textareaInput').on('input', function(e) {
   if ($(this).outerHeight() > 162) {
       while($(this).outerHeight() < this.scrollHeight) {
           $(this).height($(this).height()+1);
       };

       while($(this).outerHeight() > this.scrollHeight) {
           $(this).height($(this).height()-1);
       };   

   } else {
       while($(this).outerHeight() < this.scrollHeight) {
           if ($(this).height())
           $(this).height($(this).height()+1);
       };
   }
});

... where 162 = 150(min-height) + 6(top padding) + 6(bottom padding):

.textareaInput {
    min-height:150px;
    padding: 6px 4px;
    overflow-y:hidden;    
}