autoresize-textarea

autoresize-textarea

A jQuery (optional) plugin can automatically resize the textarea's height.

Usage

HTML:

<textarea id="description"></textarea>

CSS:

#description {
  padding: 3px;
  height: 24px;
  font-size: 16px;
  line-height: 24px;
  overflow: hidden;
  resize: none;
}

Note: Do not set transition property for the textarea.

In most cases, it will be as a jQuery plugin.

$('#description').autoResize();

It returns an object which contains a reset method to detach the bound events on textarea. So, the textarea will be changed to a normal textarea.

var autoresizeObj = $('#description').autoResize();
autoresizeObj.reset();

If there isn't the jQuery object on global object, it will expose an autoResize() method to global object.

autoResize( document.getElementById('description') );

And, this plugin can be used as a CommonJS/AMD module. You can see the demos in example folder for more details.

Package

You can use npm or bower to install it.

NPM:

npm install autoresize-textarea

Bower:

bower install autoresize-textarea

Options

You can pass an configurable object as the first parameter. If you passed a function as the first parameter, it will be treated as onresizeheight option.

• maxHeight

  Type: Number Default: undefined

  When the height of textarea is greater than maxHeight, the maxHeight will be as the height, and the overflow-y will be set to auto.

• onresizeheight

  Type: Function Default: undefined

  When the textarea's height is changed, this callback will be called. In onresizeheight callback, this refer to the textarea element and the first argument is the current numeric height of the textarea.

Events

(Only for as a jQuery plugin)

When the textarea's height is changed, a named autoresize:height event will be triggered on textarea element and the current height of textarea will be passed as the second parameter of the event listener.

Compatibility

Tested in IE6+ (including compatibility mode) and other modern browsers.

IE drawbacks:

• In IE7 (simulated by IE9), IE10 (simulated by IE11), IE11, the content will jump up and down when a newline is seen. For example, press the "Enter" key.
• In IE7/8 (simulated by IE11), the scrollHeight will increase a few pixels after typing a character in a blank line (without any character).
• In IE9 and IE7/8 (simulated by IE9), for example/basic.html example, when the value of padding is less than 5 pixels, the textarea will move up about 1 pixel after first newline.

Thanks to

• The dottoro reference helps me get some key details about scrollHeight and oninput/onpropertychange/onpaste events.

• A Ben Alpert's article - A near-perfect oninput shim for IE 8 and 9, makes me understand how to use the onselectionchange event.

• The AutoResize plugin commited in 2011 provides another solution. I refer to the part of it.

License

Under the MIT license.