Is there anyway to have a textarea "autofit" height based on the content at page load?

Question

Is there anyway through CSS or Javascript set the height of the textarea based on the content? I have a hardcoded height in my CSS but i wanted it to default so there is no vertical scroll bar on page load?

Solution 1

How about http://www.jacklmoore.com/autosize/ Drop Autosize into any web page and it should Just Work. The source is short and well commented if you are curious to how it works.

// Example:
$(document).ready(function(){
    $('textarea').autosize();   
});

Source: https://github.com/jackmoore/autosize

Demo: http://www.jacklmoore.com/autosize/

Solution 2

Without plugins you could do something like

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

Resizing the textarea while it does have a scrollbar (so elem.clientHeight < elem.scrollHeight). You can do it quite easily even without JQuery, in plain javascript.

Didn't test the code, it's just the "concept".

EDIT: Dumb me, it's much easier, no loops...

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

Solution 3

You can use the auto resize plugin using the jQuery UI Autoresize

Here is the html,

<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,

$('textarea').autoResize();

see DEMO

Solution 4

Tested in chrome

Pure javascript solution (No plugin, No jquery)

in action: fiddle

I created 3 functions:

• get line height
• get number of lines
• set the height of textarea as you type (input event)

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

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

    function getNumberOfLines(el){
        var text = el.value
        var lines = text.split(/\r|\r\n|\n/);
        return lines.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 ht = parseInt(getComputedStyle(tempDiv).getPropertyValue('height'))

        document.documentElement.removeChild(tempDiv);
        return (ht);
    }

    //set height on document load
    document.addEventListener('DOMContentLoaded', function(){document.getElementById('ta').style.height = getLineHeightInPixels(document.getElementById('ta')) + 'px';}, false);

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

Solution 5

A nice solution

JSFiddle

HTML

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

CSS

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

JQuery

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

View more solutions