JSFiddle - React, Tailwind, and code Playground

by andrewtomici

HTML

<textarea id="comments" placeholder="Type many lines of texts in here and you will see magic stuff" class="common"></textarea>

<p>Initial code by: <a href="http://www.impressivewebs.com/textarea-auto-resize/">Impressive Webs</a></p>

<p>Code turned into a plugin by: <a href="http://twitter.com/andrewtomici">Andrew Tomici</a></p>

CSS

body {
     margin: 20px;
}

p {
    margin-bottom: 14px;
}

textarea {
    color: #444;
    padding: 5px;
}

.txtstuff {
    resize: none; /* remove this if you want the user to be able to resize it in modern browsers */
    overflow: hidden;
}

.hiddendiv {
    display: none;
    white-space: pre-wrap;
    word-wrap: break-word;
    overflow-wrap: break-word; /* future version of deprecated 'word-wrap' */
}

/* the styles for 'commmon' are applied to both the textarea and the hidden clone */
/* these must be the same for both */
.common {
    width: 500px;
    min-height: 50px;
    font-family: Arial, sans-serif;
    font-size: 13px;
    overflow: hidden;
}

.lbr {
    line-height: 3px;
}

JavaScript

(function($){
    $.fn.extend({ 
        autoresize: function() {
            return this.each(function() {
                hiddenDiv = $(document.createElement('div'));
                content = null;
                $(this).addClass('txtstuff');
                hiddenDiv.addClass('hiddendiv common');
                $('body').append(hiddenDiv);
                $(this).on('keyup', function() {
                    content = $(this).val();
                    content = content.replace(/\n/g, '<br>');
                    hiddenDiv.html(content + "<br class='lbr'>");
                    $(this).css('height', hiddenDiv.height());
                });
            });
        }
    });
})(jQuery);

//apply the autoresize feature
$('#comments').autoresize();