Textarea AutoSize

With textarea-autosize it can vertically adjust a textarea based on user input while all presentation is controlled through CSS. No clone or ghost elements used. No jQuery either. Just plain vanilla JS. 😉

The sample code assumes a single line is the default.

Sample HTML:

<textarea class="js-auto-size" rows="1"></textarea>
<script type="module">
  import { TextareaAutoSize } from './src/textarea-autosize.js'
  const wrapper = new TextareaAutoSize(
    document.querySelector('textarea.js-auto-size')
  )
</script>

Sample CSS:

textarea {
  box-sizing: border-box;
  max-height: 160px; // optional but recommended
  min-height: 38px;
}

The min and max height in the sample CSS is a pre-calculated value. If your font-size is 16px, line-height is 1.5 and top/bottom padding is 6px each, then the minimum height would be 36px since 16 * 1.5 + 12 = 36.