Autogrowing textarea tags are super handy to make your forms more readable. Its super easy to do this. Here I will show how to set this up with plain javascript, jQuery, and AngularJS
jQuery:
var resize = function(element){
element.style.height = element.scrollHeight + "px";
};
$("textarea").on("keyup keydown", function(){
resize(this);
});
Plain Javascript:
var resize = function(element){
element.style.height = element.scrollHeight + "px";
};
# For a single element
var element = document.getElementById("my-textarea");
element.addEventListener("keyup", resize(element), false);
element.addEventListener("keydown", resize(element), false);
# For all textareas
elements = document.getElementsByTagName('textarea');
for (var i = 0; i < elements.length; i++) {
elements[i].addEventListener("keyup", resize(elements[i]), false);
elements[i].addEventListener("keydown", resize(elements[i]), false);
}
AngularJS:
<textarea id="txtnotes" ng-keyup="resize($event)" ng-keydown="resize($event)">
</textarea>
.controller("MyCtrl", function($scope){
$scope.resize = function($event){
$event.target.style.height = $event.target.scrollHeight + "px";
};
});
Related External Links: