Skip to content

Instantly share code, notes, and snippets.

@edbentinck
Forked from thomseddon/gist:4703968
Last active September 18, 2015 06:02
Show Gist options
  • Save edbentinck/939e5c06e71e0ef16b7c to your computer and use it in GitHub Desktop.
Save edbentinck/939e5c06e71e0ef16b7c to your computer and use it in GitHub Desktop.
Auto Expanding/Grow textarea directive for AngularJS
/**
* The MIT License (MIT)
*
* Copyright (c) 2013 Thom Seddon
* Copyright (c) 2010 Google
*
* Permission is hereby granted, free of charge, to any person obtaining a copy
* of this software and associated documentation files (the "Software"), to deal
* in the Software without restriction, including without limitation the rights
* to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
* copies of the Software, and to permit persons to whom the Software is
* furnished to do so, subject to the following conditions:
*
* The above copyright notice and this permission notice shall be included in
* all copies or substantial portions of the Software.
*
* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
* IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
* FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
* AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
* LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
* OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
* THE SOFTWARE.
* Adapted from: http://code.google.com/p/gaequery/source/browse/trunk/src/static/scripts/jquery.autogrow-textarea.js
*
* Works nicely with the following styles:
* textarea {
* resize: none;
* word-wrap: break-word;
* transition: 0.05s;
* -moz-transition: 0.05s;
* -webkit-transition: 0.05s;
* -o-transition: 0.05s;
* }
*
* Usage: <textarea auto-grow></textarea>
*/
app.directive('autoGrow', function($window, $timeout) {
return {
restrict: 'A',
link: function (scope, element, attr) {
element.on('input propertychange', update);
function update() {
var scrollTop = $window.pageYOffset,
scrollLeft = $window.pageXOffset;
element.css({
height: 'auto',
overflow: 'hidden'
});
var height = element[0].scrollHeight;
if (height > 0) {
element.css('height', height + 'px');
}
$window.scrollTo(scrollLeft, scrollTop);
}
$timeout(update); // update on page load
}
};
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment