textarea-autogrow
v1.0.0
Published
A pure Javascript solution for auto-grow / expand a textarea element by its content.
Downloads
1,482
Readme
Textarea-Autogrow
A pure javascript solution for automatically growing textarea element on typing.
- Works in all cases: expands on line breaks and word breaks.
- Great Performance: minimal DOM manipulation.
- Allows limitation of growing so a scrollbar will appear after X lines of content.
A full explanation of the code can be found on my blog post along with a jQuery plugin and an Angular directive with this technique.
Bower Installation
bower install textarea-autogrownpm Installation
npm install textarea-autogrowUsage:
Just include textarea-autogrow.js file in <head> tag or require it:
<script type="text/javascript" src="textarea-autogrow.js"></script>var Autogrow = require('textarea-autogrow');Then initialize the magic:
var textarea = document.getElementById('myTextarea');
var growingTextarea = new Autogrow(textarea);It's also recommended to add those two CSS properties to make things stable:
#myTextarea {
resize: none;
box-sizing: content-box;
}More Options:
Limit Autogrow Lines
Just place a second argument on initialization:
var growingTextarea = new Autogrow(textarea, 3); // up to 3 lines heightSet Initial Rows
You can set the initial row number using simple HTML attribute rows:
<textarea id="myTextarea" rows="1"></textarea>