textarea resizer v2

by lerouxb

HTML

<textarea>type here</textarea>
<p>This is below the textarea.</p>

CSS

p {
font-family: helvetica, sans-serif;
font-size: 12px;
line-height: 20px;
padding: 10px;
}

textarea {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
width: 100%;
height: 60px;
padding: 10px;
border-bottom: 10px solid #ccc;
background-color: #fff;
line-height: 20px;
font-size: 14px;
font-family: georgia, serif;
color: #ccc;
overflow: hidden; /* now you can't see the flashing scrollbars */
resize: none;
}
textarea:focus {
outline: none;
color: #222;
border-bottom-color: #222;
}

JavaScript

var resizeTextarea = function() {
    this.style.height = "";

    var
        $this = $(this),            
        outerHeight = $this.outerHeight(),
        scrollHeight = this.scrollHeight,
        innerHeight = $this.innerHeight(),
        magic = outerHeight - innerHeight;
    this.style.height = scrollHeight + magic + "px";
};

// keydown is too soon and keyup only happens AFTER the character is inserted,
// so the screen would have updated already.
// So just set overflow: hidden on the textarea.
// not sure about cut/paste events.
$('textarea')
    .keydown(resizeTextarea)
    .keyup(resizeTextarea)
    .change(resizeTextarea)
    .focus(resizeTextarea);