离子中的自动增长文本区域

Question

我正在尝试向我的应用程序添加一个自动增长的文本区域，但由于某种原因它无法正常工作。我正在使用的模块是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);
        }
    };
});

这会将你所有的文本区域转换为增长/缩小。

希望有帮助！

Answer 2

我编写了一个非常简单的指令，适用于 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 3

我发现了一种更好的方法来做到这一点，而无需使用任何其他第三方库或指令。

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

我希望这对将来可能面临此问题的其他人有所帮助。

更新：这是一个代码笔：http://codepen.io/kpourdeilami/pen/KDepk

更新2：使用@benshope提供的sn-p

更新 3：如果您使用的是 Ionic/Angular 2，请使用“Max Al Farakh”提供的答案

Answer 4

尝试角弹性。它是一个为自动扩展文本区域而构建的角度指令。使用 bower 安装。

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 属性：

TextArea#Properties

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

Answer 6

你的意思是垂直自动增长？我试过这个：

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

有点骇人听闻，但是在确定了预期的列长度之后，让我们根据输入文本的长度来定义行长度。当我开始打字时，它开始垂直增长！ （没有滚动/看不见的文本）。

Answer 7

使用 ionic-5 ，有一个名为 auto-grow 的选项，在您的视图中将其设置为 true。 在css中，设置min-height，max-height，控制文字的增长。

ion-textarea {
min-height: 100px;
max-height: 200px;
}

此外，在上述修复之后，如果您对占位符文本有一些奇怪的行为，请在 ion-textarea 内添加以下内容

::ng-deep textarea {
min-height: 100px;
}

Answer 8

如果它可以为某人服务，我改变了一点 benshope 的解决方案，因为即使用户回车，我也需要 textarea 增长。

因此，我没有监听输入值的变化（回车时并不总是触发），而是监听 textarea 上的 input 事件。

(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 9

只需安装： 凉亭安装角弹性或

npm install angular-elastic;

然后像这样在 index.html 中导入 elastic.js 文件

    <script src="js/elastic.js" type="text/javascript"></script>

之后像这样将它注入到你的角度模块中：

angular.module('yourApp', ['monospaced.elastic']);

在您的 html 文件中，在您的页脚栏中执行以下操作：

  <ion-footer-bar  style="height: auto;  overflow: visible !important"><textarea rows="1" msd-elastic  ng-model="myMsg">
</textarea>