JSFiddle - React, Tailwind, and code Playground

by adamh

HTML

<textarea>This is some test text. This is some test text. This is some test text. This is some test text. This is some test text.This is some test text. This is some test text.</textarea>

JavaScript

(function($) {

    $.fn.growbag = function(type) {

        return this.each(function() {
            console.log('Growing');
            $(this).change(function() {
                var $this = $(this);

                // create a new element
                var proxy = $('<div />');
                console.log(proxy);
                $this.css('scrolling', 'none');
                proxy.text($this.text());
                proxy.css({
                    'width': $this.width() + 'px',
                    'border': $this.css('border'),
                    'line-height': $this.css('line-height'),
                    'font-family': $this.css('font-family'),
                    'font-size': $this.css('font-size'),
                    'font-weight': $this.css('font-weight'),
                    'padding': $this.css('padding'),
                    'position': 'absolute'
                });
                proxy.insertAfter($this);
                $this.height(proxy.height());
            });
            return $this;

        });

    }
})(jQuery);

$('textarea').growbag();