Angular directive for auto-grow / auto-resize of textarea elements on typing.
- Works in all cases: expands on line breaks and word breaks.
- Great Performance: minimal DOM manipulation and no watchers.
- Allows limitation of auto-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 install angular-autogrowInclude angular-autogrow.min.js file in <head> section of the HTML:
<script type="text/javascript" src="angular-autogrow.min.js"></script>Include angular-autogrow dependency on your angular module:
var app = angular.module("app", ["angular-autogrow"]);It's also recommended to add those two CSS properties to make things stable:
textarea {
resize: none;
box-sizing: content-box;
}Add the directive to the textarea element:
<textarea autogrow></textarea>You can limit the auto-growing of the textarea element by using max-lines attribute:
<textarea autogrow max-lines="3"></textarea>You can set the initial line number using rows attribute:
<textarea autogrow rows="1"></textarea>