JSFiddle - React, Tailwind, and code Playground

by kuwabarahiroshi

HTML

<script src="http://kuwabarahiroshi.github.com/jquery-autogrow-textarea/javascripts/jquery-autogrow-textarea.js"></script>
<p>Textarea without padding.</p>
<textarea id="text1" cols="30" rows="4"></textarea>

<p>Textarea with padding 20px and misc styles.</p>
<textarea id="text2" cols="30" rows="5"></textarea>

<p>Textarea with initial value.</p>
<textarea id="text3" cols="30" rows="3">
Initial value which exceeds rows specified as `rows="3"` in HTML attribute.

test
test
test
test
test</textarea>

CSS

textarea {
    margin: 30px;
}

#text2 {
    padding: 20px;
    border-radius: 10px;
    behavior: url('/js/lib/PIE-1.0.0/PIE.htc'); /* for IE6-8 */
    border: 3px solid #ccc;
    outline: none;
}

#text3 {
    padding: 20px;
}

JavaScript

/**
 * This is a demo of jQuery autoGrowTextArea plugin.
 *
 * For the source code,
 * @see https://github.com/kuwabarahiroshi/jquery-autogrow-textarea
 */
jQuery(function($) {
    $('textarea').autoGrowTextArea();
});