To automatically resize textareas, you can utilize the auto resize plugin with jQuery UI Autoresize

Below is the HTML code snippet:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
<script src="http://css-tricks.com/examples/TextareaTricks/js/autoresize.jquery.min.js"></script>
<textarea></textarea>

And here is the jQuery script:

$('textarea').autoResize();

Check out the DEMO for a live example.

One way to resize a textarea without using plugins is by checking if it has a scrollbar and increasing its height accordingly using plain JavaScript.

$(document).ready(function(){
  elem=document.getElementById('#elemid');
  while(elem.clientHeight < elem.scrollHeight) {elem.height(elem.height()+10)}
});

This code snippet dynamically adjusts the textarea's height based on its content, ensuring that all text can be displayed without the need for scrolling. Remember to test the code before implementing it in your project.

Alternatively, you can achieve the same result more efficiently without using loops:

if (elem.clientHeight < elem.scrollHeight) elem.style.height=elem.scrollHeight+"px";

This related inquiry regarding creating a WhatsApp-like input area was mistakenly identified as a duplicate of the current discussion. Given that I am unable to provide my input there, I will address it here.

I had been experimenting with designing a WhatsApp-style input field that encompassed the following functionalities:

1. Ensuring the div/textarea expands upwards when the content surpasses 4em
2. Capping the maximum height of the div/textarea at 6em
3. Modifying the messaging section (located above the div/textarea) to adjust its scrollbar thumbtack size accordingly

If anyone is seeking a pure CSS solution for this scenario (as I did just a short while ago), here's what worked for me:

.arena {
  position: absolute;
  height: 20em;
  width: 12em;
  background-color: #efefef;
  padding: 1em;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.messages {
  padding: 0.2em;
  height: 5em;
  flex: 1 1 0;
  overflow: auto;
}
.content {
  background-color: teal;  
  height: 20em;
}
.footer {
  position: relative;
  background-color: #cdcdcd;
  padding: 0.2em;
}
.editable {
  outline: none;
  max-height: 6em;
  min-height: 4em;
  overflow: auto;
  width: 80%;
  background-color: #fff;
}

<div class="arena">
  <div class="messages">
    <div class="content"></div>
  </div>
  <div class="footer">
    <div class="editable" contenteditable="true"></div>
  </div>
</div>

Tested and optimized for Chrome browser

Solution implemented using pure JavaScript only (No plugins or jQuery required)

See it in action: Live demo

I have developed 3 custom functions:

• Determine line height
• Calculate number of lines in textarea
• Update the height of textarea dynamically while typing (input event)

// Attach input event
document.getElementById('ta').addEventListener('input', autoHeight, false);

function autoHeight(e) {
    var lineHeight = getLineHeightInPixels(e.target);
    var numLines = getNumberOfLines(e.target);
    var height = lineHeight * numLines;
    e.target.style.height = height + 'px';
}

function getNumberOfLines(el){
    var textValue = el.value;
    var linesArray = textValue.split(/\r|\r\n|\n/);
    return linesArray.length;
}

function getLineHeightInPixels(el){

    var tempDiv = document.createElement('div');
    
    tempDiv.style.visibility = 'hidden';
    tempDiv.style.fontFamily = getComputedStyle(el).getPropertyValue('font-family');
    tempDiv.style.fontSize = getComputedStyle(el).getPropertyValue('font-size');
    tempDiv.style.lineHeight = getComputedStyle(el).getPropertyValue('line-height');
    tempDiv.style.fontVariant = getComputedStyle(el).getPropertyValue('font-variant');
    tempDiv.style.fontStyle = getComputedStyle(el).getPropertyValue('font-style');
    
    tempDiv.innerText = 'abcdefghijklmnopqrstuwxyz';
    
    document.documentElement.appendChild(tempDiv);
    
    var heightVal = parseInt(getComputedStyle(tempDiv).getPropertyValue('height'))
    
    document.documentElement.removeChild(tempDiv);
    return (heightVal);
}
// Set initial height on document load
document.addEventListener('DOMContentLoaded', function(){
    document.getElementById('ta').style.height = getLineHeightInPixels(document.getElementById('ta')) + 'px';
}, false);

<textarea id="ta"></textarea>

Here's a great solution

Check out this JSFiddle

HTML Code Snippet

<div id="container">
    <textarea>
    1
    12
    123
    1234
    12345
    123456
    1234567
    </textarea>
</div>

CSS Code Snippet

div#container textarea {
    overflow-y: hidden; /* prevents scroll bar flash */
    padding-top: 1.1em; /* prevents text jump on Enter keypress */
}

JQuery Script

// Auto adjust the height of textarea
$('#container').on('keyup', 'textarea', function (e) {
    $(this).css('height', 'auto' );
    $(this).height(this.scrollHeight);
});
$('#container').find('textarea').keyup();

If you're looking to automatically expand a textarea as the user types, consider using the ExpandingTextArea plugin. This plugin maintains an invisible clone pre element behind your textarea, updating the textarea whenever the height of this pre element changes.

Implementation is simple - just include "expanding.js" and "jQuery" in your page, then add the class "expanding" to the textarea that you want to expand:

<script src='expanding.js'></script>
<textarea class='expanding'></textarea>

For more information and a demo, visit this link.

Note: The plugin will also work on document load for texts that are already added to the textarea.

If you're okay with having a scrollbar inside the text area, you can achieve this using the following code:

$(document).ready(function(){
    tx = $('#textarea')
    tx.height(tx.prop('scrollHeight'));
})

For a demonstration, check out this Fiddle

Here's another example with min and max-width set: Fiddle

Alternatively, consider using plug-ins like auto-size, which automatically adjust the height of the text box as you type.

You can also explore this plug-in for similar functionality.

Presenting a javascript-only solution without the need for jquery or plugins. Check out the DEMO

How does this solution function? Let's say you have default font size and line height settings. In that case, your textarea can accommodate around 11 characters per 100px width. With this in mind, we craft the following function.

function textareaSetSize(elem, width)
{
    var length = elem.value.length;
    //approximating 11 characters per 100 pixels
    var estimatedLines = Math.round(length/(width/100*11));
    //alert('Estimated number of lines: ' + length);
    elem.style.width  = width + 'px';
    elem.rows = estimatedLines;
}

And then...

var selector = document.getElementsByClassName('textarea');
for(var i = 0; i < selector.length; i++)
{
    selector[i].onkeyup = function(){
        textareaSetSize(this, 400);
    };   
}

In the HTML section...

<button id="reset">Empty</button>
<textarea class="textarea" id="autosize"></textarea>
<textarea class="textarea" id="autosize2"></textarea>
<textarea class="textarea" id="autosize3"></textarea>
<textarea class="textarea" id="autosize4"></textarea>

Implementation...

textareaSetSize(ta, 500);
textareaSetSize(ta2, 400);
textareaSetSize(ta3, 400);
textareaSetSize(ta4, 400);

This method may not be flawless, so any feedback on improvements is welcome.

The styling applied to the textarea element in the code snippet below focuses solely on setting its width, with no need for an initial height specification. The CSS property overflow is not deemed necessary either, as the designated scrollHeight takes care of displaying content that may exceed the visible area:

It represents the total height of an element's content, inclusive of any overflowed materials not currently displayed.

For further information about scrollHeight, refer to MDN documentation.

In cases where Internet Explorer compatibility is a concern, including overflow: auto becomes essential to prevent IE from unnecessarily adding a vertical scrollbar when there's no scrolling content present.

Note that specifying the width isn't mandatory, but it typically remains a commonly manipulated property within this context.

The accompanying JavaScript script is as follows:

document.addEventListener("DOMContentLoaded", function(event) {
    var ta = document.getElementById('ta');
    ta.style.height = ta.scrollHeight + 'px';
});

Upon the DOM completing loading, the textarea's height is automatically adjusted to match its scrollHeight.

A complete sample page intended for testing purposes is outlined as:

<!DOCTYPE html>
<html>
<head>
<title>Sample Page</title>
<style>
textarea {
    width: 300px;
    overflow: auto;
}
</style>
</head>
<body>
    <textarea id="ta">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</textarea>
<script>
    document.addEventListener("DOMContentLoaded", function(event) {
        var ta = document.getElementById('ta');
        ta.style.height = ta.scrollHeight + 'px';
    });
</script>
</body>
</html>

If required, the specified code can be extended to all textareas present within the webpage:

document.addEventListener("DOMContentLoaded", function(event) {
    var tas = document.getElementsByTagName('textarea');
    for (var i=0; i < tas.length; i++) {
        tas[i].style.height = tas[i].scrollHeight + 'px';
    }
});

Surprisingly, my search engine led me to another helpful solution in the form of a "How-To" Tutorial:

http://www.sitepoint.com/build-auto-expanding-textarea-3/

EDIT:

Here is the code snippet provided:

/**
 * TextAreaExpander plugin for jQuery
 * v1.0
 * Expands or contracts a textarea height depending on the
 * quatity of content entered by the user in the box.
 *
 * By Craig Buckler, Optimalworks.net
 *
 * As featured on SitePoint.com:
 * http://www.sitepoint.com/blogs/2009/07/29/build-auto-expanding-textarea-1/
 *
 * Please use as you wish at your own risk.
 */

// More code below describing usage and implementation details...

I decided to keep the comments within the code intact as a way of giving credit where it's due ;)

Upon page load, the use of scrollHeight yielded a return value of 0 (possibly due to the initial hidden state of my textarea). While this may not be considered best practice (given my novice status in JavaScript), I had success by determining the number of lines within the textarea and identifying the length of the longest line. Subsequently, I adjusted the width and height accordingly.

var elements = document.getElementsByTagName("textarea")
for (var i = 0; i < elements.length; i++) {
    var atagelement = elements[i];
    console.log(atagelement.value);

    var textareasplit =atagelement.value.split(/\r|\r\n|\n/);
    var textareaheight =  textareasplit.length *17  // modify based on requirements

    var maxline=0
    for  (var j = 0; j < textareasplit.length; j++){
    var line = textareasplit[j];
    var linelenght= line.length;
        if (maxline < linelenght){
            maxline= linelenght;
        };
    };
    var textareawidth= maxline*10  // adjust as needed
    atagelement.setAttribute('style', "width:" + textareawidth+"px ; height:"+textareaheight+"px");

}

If necessary, you can also define a max-width (or max-height) like so

    var maxwidth= window.innerWidth *0.8
    console.log(maxwidth)
    atagelement.setAttribute('style', "width:" + textareawidth+"px ; height:"+textareaheight+"px ; max-width:" + maxwidth+ "px");

This solution worked perfectly for my needs

$(document).ready(function(){
    $('body').on('keyup','textarea', function(event) {
        if ($('textarea')[0].clientHeight < $('textarea')[0].scrollHeight)
        {
            $('textarea').css({'height': $('textarea')[0].scrollHeight + "px"});
        }
        else
        {
            // reset height to default value
            $('textarea').css({'height': ''});
        }
    });
});

I successfully accomplished this task with just one straightforward JavaScript function and a pair of CSS classes.

<style>
    textarea{
     height: auto;
     resize: none;
     overflow: auto;
    }

    .disabled-input{
     min-height: 4em;
     }
</style>

<script>
    function adjustTextareaHeight( element ){
        /**
         * This function dynamically adjusts the height of textareas
         */
        element.style.height = 'auto';
        element.style.height = element.scrollHeight*1.1 + 'px';
    }
</script>

To apply this solution, simply call: adjustTextareaHeight( document.getElementById( 'YOUR_ELEMENT_ID' ) );