Auto resize textarea

http://www.impressivewebs.com/textarea-auto-resize/

by phsiao2000

HTML

<textarea class="comments" placeholder="Type many lines of texts in here and you will see magic stuff">Tina Hsiao</textarea>

<textarea class="comments" placeholder="Type many lines of texts in here and you will see magic stuff">Philipoo</textarea>

<textarea class="comments" placeholder="Type many lines of texts in here and you will see magic stuff">Alex</textarea>

CSS

body {
     margin: 20px;
}

textarea {
    width: 500px;
    min-height: 50px;
    font-family: Arial, sans-serif;
    font-size: 13px;
    color: #444;
    padding: 5px;
}

.noscroll {
    overflow: hidden;
}

.hiddendiv {
    display: none;
    white-space: pre-wrap;
    width: 500px;
    min-height: 50px;
    font-family: Arial, sans-serif;
    font-size: 13px;
    overflow: hidden;
    padding: 5px;
    word-wrap: break-word;
}

JavaScript

var txt = $('.comments'),    
hiddenDiv = $(document.createElement('div')),
content = null;

txt.addClass('noscroll');
hiddenDiv.addClass('hiddendiv');

$('body').append(hiddenDiv);

txt.on('keyup', function() {
    
    content = $(this).val();
    content = content.replace(/\n/g, '<br>');
    hiddenDiv.html(content);

    $(this).css('height', hiddenDiv.height());

});

txt.trigger('keyup');