javascript - body - meta html

Área de crecimiento automática en iónico

Question

Estoy intentando agregar un área de texto de crecimiento automático a mi aplicación, pero por alguna razón no funciona. El módulo que estoy usando es https://github.com/tagged/autogrow (se recomendó en el foro iónico)

Answer 1

Prueba angular elástico. Es una directiva angular construida para expandir automáticamente un área de texto. Usa bower para instalarlo.

bower install angular-elastic

agréguelo a su proyecto, luego puede usarlo como un atributo

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

o como clase

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

Answer 2

¿Te refieres al crecimiento automático vertical? Intenté esto:

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

Un poco hackish, pero después de haber determinado una longitud de columna esperada, permite definir la longitud de la fila en función de la longitud del texto impugnado. Comienza a crecer verticalmente cuando empiezo a escribir! (sin texto de desplazamiento / fuera de vista).

Answer 3

La respuesta anterior no se reduce, aquí hay una versión mejorada:

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

Esto transformará todas tus áreas de texto para crecer / achicarse.

¡Espero que ayude!

Answer 4

Encontré una manera mucho mejor de hacerlo sin usar ninguna otra biblioteca o directiva de terceros.

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

Entonces simplemente agregar ng-keypress = "updateEditor ()" al área de texto haría el trabajo.

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

Espero que esto ayude a otros que puedan enfrentar este problema en el futuro.

Actualización: Aquí hay un códec para esto: http://codepen.io/kpourdeilami/pen/KDepk

Actualización 2: utilice el fragmento provisto por @benshope

Actualización 3: si usa Ionic / Angular 2, use la respuesta proporcionada por "Max Al Farakh"

Answer 5

Si puede servirle a alguien, cambié un poco la solución de benshope porque necesitaba que el área de texto creciera incluso cuando el usuario hiciera un retorno de carro.

Por lo tanto, en lugar de escuchar los cambios en el valor de entrada (que no siempre se disparaba cuando se realiza un retorno de carro), yo mantengo el evento de input en el área de texto.

(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);
        }
    };
}})();

Answer 6

Escribí una directiva muy simple que funciona con Ionic 2 y ion-textarea . Aquí está:

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

Aquí hay una esencia: https://gist.github.com/maxt3r/2485356e91a1969bdb6cf54902e61165

Artículo