Auto growing textarea in ionic

Hi,

I’m trying to add an autogrowing textarea to my app but for some reason it is not working. It is the module that I’m using https://github.com/tagged/autogrow (it was recommended on the ionic forum)

1 Like

you can try this one

1 Like

This one didn’t work too. I think none of this work inside the ion-scroll tag.

Hey @Khashayar, can you post a demo of this?

I found a much more better alternative.

$scope.updateTextArea = function() {
    var element = document.getElementById("TextArea");
    element.style.height =  element.scrollHeight + "px";
}

It doesn’t need any additional directives or jQuery. You can call the updateEditor() on ng-change.

7 Likes

@Khashayar Thanks, your trick really worked. Below is the code for same.

<textarea 
	placeholder="Enter Notes"
	id="txtnotes"
	ng-keyup="expandText()"
	ng-keydown="expandText()">
</textarea> 


$scope.expandText = function(){
	var element = document.getElementById("txtnotes");
	element.style.height =  element.scrollHeight + "px";
}
3 Likes

What about multiple textareas in one controller? I noticed that I have to add another scope for each textareas.

$scope.expandText = function(){
var element = document.getElementById(“txtnotes”);
element.style.height = element.scrollHeight + “px”;
}
$scope.expandText1 = function(){
var element = document.getElementById(“txtnotes1”);
element.style.height = element.scrollHeight + “px”;
}

or you can pass in the id as an attribute to the function.

Man you save my evening!!!
I suggest this just in case you have to edit that field and you want to start from the right textarea height

$scope.$on('$ionicView.afterEnter',function(){
      $scope.expandText();
    });

And thid directive for close the keyboard on enter key press!
(the ionic version doesn’t work -> return-close=“true”)

.directive('ngEnter', function($cordovaKeyboard,$timeout) {
        return function(scope, element, attrs) {
            element.bind("keydown keypress", function(event) {
                if(event.which === 13) {
                    event.preventDefault();
                    $cordovaKeyboard.close();
                }
            });
        };
    })
2 Likes

Any ideas on how to apply that on Ionic Creator?

Cheers!

I am using this one.