❤
npm
Sign UpSign In

textarea-autogrow

1.0.0 • Public • Published

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-autogrow

npm Installation

npm install textarea-autogrow

Usage:

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 height

Set Initial Rows

You can set the initial row number using simple HTML attribute rows:

<textarea id="myTextarea" rows="1"></textarea>

Readme

Keywords

Package Sidebar

Install

npm i textarea-autogrow

Repository

github.com/CodingAspect/Textarea-Autogrow

Homepage

github.com/CodingAspect/Textarea-Autogrow#readme

Weekly Downloads

118

Version

1.0.0

License

MIT

Last publish

Collaborators

  • evyros
Try on RunKit
Report malware