JSFiddle - React, Tailwind, and code Playground
HTML
<textarea rows="10" cols="30" id="ta"></textarea>
CSS
textarea {
margin: 50px 0 0 50px;
}
JavaScript
/*
* jQuery YAAR: Yet Another Auto-Resizer for textareas - v1.0
*
* Written by Ben Demboski
* https://github.com/bendemboski
*
* This is plugin is provided as-is with no copyright, licensing,
* substitutions, exchanges or refunds. If you have a problem with
* that, you can talk to my lawyer Mr. Lionel Hutz.
*/
//
// Script: jQuery YAAR: Yet Another Auto-Resizer for textareas
//
// Version: 1.0, last updated 5/14/2012
// Github: https://github.com/bendemboski/jquery-yaar
// Source: https://raw.github.com/bendemboski/jquery-yaar/master/jquery.yaar.js
// Minified: https://raw.github.com/bendemboski/jquery-yaar/master/jquery.yaar.min.js (1.7k)
//
// Dependencies:
// Stricly speaking, YAAR does not have any dependencies other than jQuery
// itself, however to function correctly it needs to know when the text in
// the target textarea changes. The simplest way to achieve this is to include
// jquery.textchange (http://www.zurb.com/playground/jquery-text-change-custom-event),
// and YAAR will automatically receive the text change events. Any library
// or custom application code that dispatches a 'textchange' event on the
// textarea, or custom application code that refreshes YAAR (see API below)
// when its contents change will do the job.
//
// jQuery versions - any
//
// Description:
// This is a jQuery plugin to perform auto-sizing of textarea elements
// as the user types, the goal being that the textarea is always tall
// enough to display all of the text without scrolling. Unlike other
// libraries that are all clever and predict how much space the text
// is going to take up so they can keep the textarea sized correctly,
// this plugin is entirely un-clever and cheats off of the browser's
// homework.
//
// The basic approach is to create an invisible absolutely positioned
// div that mirrors all the relevant css attributes of the textarea,
// including the width, populate it with the text in the textarea,
// allow the browser to...