Auto Ajust Height Textarea / Textfield

Facebook Messenger-like auto ajust textfield height when typing

HTML

<textarea></textarea>

CSS

* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

textarea {
  display: block;
  min-height: 20px;
  max-height: 100px;
}

JavaScript

var t = document.querySelector('textarea')
var s = getComputedStyle(t)

t.style.resize = 'none'

t.addEventListener('input', autoAdjust)
t.addEventListener('change', autoAdjust)

function autoAdjust() {
	t.style.height = ''
	var space = t.clientHeight - parseFloat(s.height, 10)

  t.style.height = (t.scrollHeight - space) + 'px'
}