<textarea maxlength="100" class="text" data-adaptheight rows="3" cols="40" placeholder="Your input"
style="padding: 16px; line-height: 1.5;"></textarea>
<script>
(function () {
function adjustHeight(el, minHeight) {
var outerHeight = parseInt(window.getComputedStyle(el).height, 10);
var diff = outerHeight - el.clientHeight;
el.style.height = 0;
el.style.height = Math.max(minHeight, el.scrollHeight + diff) + 'px';
}
var textAreas1 = document.getElementsByClassName('text');
for(var i = 0; i< textAreas1.length; i++) {
foo([textAreas1[i]]);
}
function foo(textAreas){
for (var i = 0, l = textAreas.length; i < l; i++) {
var el = textAreas[i];
el.style.boxSizing = el.style.mozBoxSizing = 'border-box';
el.style.overflowY = 'hidden';
var minHeight = el.scrollHeight;
el.addEventListener('input', function () {
adjustHeight(el, minHeight);
});
window.addEventListener('resize', function () {
adjustHeight(el, minHeight);
});
adjustHeight(el, minHeight);
}};
}());
</script>
