JSFiddle - React, Tailwind, and code Playground

by mackry

HTML

<textarea id="text-area" rows="4" cols="50">asdsadasdas</textarea>

CSS

body {
     margin: 20px;
}

textarea {
}

JavaScript

$.fn.autogrow = function(callback) {
    return this.each(function() {
        var colsDefault = this.cols;
        var rowsDefault = this.rows;

        var grow = function() {
            growByRef(this);
        }

        var growByRef = function(obj) {
            var linesCount = 0;
            var lines = obj.value.split('\n');

            for (var i = lines.length - 1; i >= 0; --i) {
                linesCount += Math.floor((lines[i].length / colsDefault) + 1);
            }

            if (linesCount >= rowsDefault) {
                obj.rows = linesCount + 1;
            } else {
                obj.rows = rowsDefault;
            }
        }

        this.onkeyup = grow;
        this.onfocus = grow;
        this.onblur = grow;
        growByRef(this);
    });
};

$(document).ready(function() {
    $('textarea').autogrow();
});