Auto resize textarea

by Neviton

HTML

<textarea name="" id="" cols="30" rows="2"></textarea>
<button class="btn-log">Log It</button>
<div class="log"></div>

CSS

textarea {
    width: 100px;
    height: 20px;
    overflow: hidden;
    line-height: 1em;
}

JavaScript

$log = $('.log');
$textarea = $('textarea');
$btn = $('.btn-log');

$btn.on('click', function(){
    $log.html('height: ' + $textarea.height());
    $log.append('outerHeight: ' + $textarea.outerHeight());
    $log.append('<br>scrollTop: ' + $textarea.scrollTop());
    $log.append('<br>scrollHeight: ' + $textarea[0].scrollHeight);
});

$textarea.on('keyup', function() {
    $log.html('line-height: ' + parseInt($textarea.css('line-height')));
    //if ($textarea[0].scrollHeight >= $textarea.outerHeight()) {
        $textarea.height($textarea[0].scrollHeight);
        //$textarea.stop().animate({height: $textarea[0].scrollHeight /*+ parseInt($textarea.css('line-height'))*/}, 150);
        $log.append('<br>resize');
    //}
});