Auto growing textarea in ionic

1

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
2

you can try this one

1 Like
3

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

4

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

5

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
6

@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
7

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”;
}

8

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

9

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
10

Any ideas on how to apply that on Ionic Creator?

Cheers!

11

I am using this one.