在离子中自动生长textarea

Question

我试图在我的应用程序中添加一个autogrowing textarea但由于某种原因它无法正常工作.我使用的模块是https://github.com/tagged/autogrow(它是在离子论坛上推荐的)

Answer 1

上面的答案并没有缩小 - 这是一个改进的版本:

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

这将改变你所有的textareas增长/收缩.

希望有所帮助!

Answer 2

我没有使用任何其他第三方库或指令,我找到了更好的方法.

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

然后简单地将ng-keypress ="updateEditor()"添加到textarea就能完成这项工作.

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

我希望这可以帮助将来可能面临这个问题的其他人.

更新:这是一个codepen:http://codepen.io/kpourdeilami/pen/KDepk

更新2:使用@benshope提供的代码段

更新3:如果您正在使用Ionic/Angular 2,请使用"Max Al Farakh"提供的答案

Answer 3

我写了一个非常简单的指令,适用于Ionic 2和ion-textarea.这里是:

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

这是一个要点:https://gist.github.com/maxt3r/2485356e91a1969bdb6cf54902e61165

编辑:看看其他人的其他建议的要点.

Answer 4

尝试Angular-Elastic.它是一个角度指令,用于自动扩展textarea.使用凉亭安装它.

bower install angular-elastic

将其添加到项目中,然后您可以将其用作属性

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

或作为班级

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

Answer 5

从 Ionic 4.4 开始，它是内置的，请参阅autoGrow属性：

文本区域#属性

<ion-textarea auto-grow="true" rows="1"></ion-textarea>