Automatically growing text field in ionic

Question

I am trying to add textarea autoload to my application, but for some reason it does not work. The module I use is https://github.com/tagged/autogrow (it was recommended in the ion forum)

Answer 1

I wrote a very simple directive that works with Ionic 2 and ion-textarea . Here:

 import { Directive, HostListener, ElementRef } from "@angular/core"; @Directive({ selector: "ion-textarea[autoresize]" // Attribute selector }) export class Autoresize { @HostListener("input", ["$event.target"]) onInput(textArea: HTMLTextAreaElement): void { this.adjust(); } constructor(public element: ElementRef) { } ngOnInit(): void { this.adjust(); } adjust(): void { let ta = this.element.nativeElement.querySelector("textarea"); ta.style.overflow = "hidden"; ta.style.height = "auto"; ta.style.height = ta.scrollHeight + "px"; } } 

Here is the gist: https://gist.github.com/maxt3r/2485356e91a1969bdb6cf54902e61165

EDIT: Look at the gist for other suggestions from other people.

Answer 2

The answer above is not shortened - here is an improved version:

https://codepen.io/benshope/pen/xOPvpm

 angular.module('app').directive('expandingTextarea', function () { return { restrict: 'A', controller: function ($scope, $element, $attrs, $timeout) { $element.css('min-height', '0'); $element.css('resize', 'none'); $element.css('overflow-y', 'hidden'); setHeight(0); $timeout(setHeightToScrollHeight); function setHeight(height) { $element.css('height', height + 'px'); $element.css('max-height', height + 'px'); } function setHeightToScrollHeight() { setHeight(0); var scrollHeight = angular.element($element)[0] .scrollHeight; if (scrollHeight !== undefined) { setHeight(scrollHeight); } } $scope.$watch(function () { return angular.element($element)[0].value; }, setHeightToScrollHeight); } }; }); 

This will convert all your text areas to enlarge / compress.

Hope this helps!

Answer 3

I found a much better way to do this without using any other third-party library or directive.

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

Then just adding ng-keypress = "updateEditor ()" to the text box will complete the task.

 <textarea ng-keypress="updateEditor()" ng-model="bar"> </textarea> 

Hope this helps others who may face this problem in the future.

Update: Here is the code for this: http://codepen.io/kpourdeilami/pen/KDepk

Update 2: Use the snippet provided by @benshope

Update 3: If you are using Ionic / Angular 2, use the answer provided by "Max Al Farakh"

Answer 4

Try Angular-Elastic. This is an angular directive designed to automatically expand a text field. Use bower to install it.

 bower install angular-elastic 

add it to your project, then you can use it as an attribute

 <textarea msd-elastic ng-model="foo"> </textarea> 

or as a class

 <textarea class="msd-elastic" ng-model="bar"> </textarea> 

Answer 5

Do you mean vertical automatic growing? I tried this:

  <textarea ng-model='doc.description' rows='{{doc.description.length/50 + 1}}' cols='50'></textarea> 

The sign is hacky, but after determining the expected length of the column, you can determine the length of the line depending on the length of the text entered. When I start typing, it starts to grow vertically! (text with scroll / no text).

Answer 6

If he can serve someone, I changed the benshope solution a bit, since I need to make textarea grow even when the user returns the carriage.

Therefore, instead of listening to changes on the input value (which did not always work when performing a carriage return), I send an input event to the text box.

 (function () { 'use strict'; angular .module('app') .directive('expandingTextarea', expandingTextarea); function expandingTextarea() { return { restrict: 'A', controller: function ($scope, $element, $attrs, $timeout) { $element.css('min-height', '0'); $element.css('resize', 'none'); $element.css('overflow-y', 'hidden'); setHeight(0); $timeout(setHeightToScrollHeight); function setHeight(height) { $element.css('height', height + 'px'); $element.css('max-height', height + 'px'); } function setHeightToScrollHeight() { console.log('set height'); setHeight(0); var scrollHeight = angular.element($element)[0] .scrollHeight; if (scrollHeight !== undefined) { setHeight(scrollHeight); } } angular.element($element)[0].addEventListener("input", setHeightToScrollHeight); } }; }})();