JSFiddle - React, Tailwind, and code Playground

textarea auto height

by CBroe

HTML

<textarea class="list_header_itemInput" placeholder="Enter an item..."></textarea>

JavaScript

$('.list_header_itemInput').attr("rows", "1");
console.log(
    $('.list_header_itemInput')[0].offsetHeight,
    $('.list_header_itemInput')[0].clientHeight,
    $('.list_header_itemInput')[0].scrollHeight,
    $('.list_header_itemInput').css("line-height"),
    $('.list_header_itemInput').height()
);
$('.list_header_itemInput').keyup(function() { 
    this.style.height = "0";
    this.style.height = (this.scrollHeight) + "px";
        console.log(
    $('.list_header_itemInput')[0].offsetHeight,
    $('.list_header_itemInput')[0].clientHeight,
    $('.list_header_itemInput')[0].scrollHeight,
    $('.list_header_itemInput').css("line-height"),
    $('.list_header_itemInput').height()
);
});

$('.list_header_itemInput').keydown(function(e) { 
    if(e.which == 13) {
        this.style.height = (this.offsetHeight + 15)+"px";
    }
});