Textarea AutoSize

Vertically adjust a textarea based on user input and control all presentation in CSS. No clone or ghost elements used. 😉

Sample HTML:

<textarea class="js-auto-size" rows="1"></textarea>

<script src="http://code.jquery.com/jquery-2.1.0.min.js"></script>
<script src="jquery.textarea_autosize.min.js"></script>
<script>
$('textarea.js-auto-size').textareaAutoSize();
</script>

Minimum required CSS:

textarea {
  box-sizing: border-box;
  max-height: 160px; // optional but recommended
  min-height: 38px;
  overflow-x: hidden; // for Firefox (issue #5)
}

The minimum and maximum heights above are determined based on font size and line height. The overflow-x setting is for Firefox to prevent an initial additional line from appearing.