Javascript 离子交换膜中的自动生长区

我正在尝试向我的应用程序添加一个自动签名文本区域，但由于某些原因，它无法工作。我使用的模块是（在离子论坛上推荐的）

试试角弹性。它是一个角度指令，用于自动扩展文本区域。使用bower安装它

bower install angular-elastic

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

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

还是作为班级

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

---

我发现了一种更好的方法，可以在不使用任何其他第三方库或指令的情况下实现这一点

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

然后只需将ng keypress=“updateEditor（）”添加到文本区域即可完成此任务

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

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

更新：这里有一个代码笔：

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

---

更新3:如果您使用的是爱奥尼亚/Angular 2，请使用“Max Al-Farakh”提供的答案

上述答案不会缩小-以下是一个改进版本：

这将使所有文本区域变大/缩小

---

希望有帮助

你是说垂直自动生长吗？我试过这个：

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

---

有点老土，但在确定了预期的列长度之后，让我们根据输入文本的长度定义行长度。当我开始打字时，它开始垂直生长！（无滚动/视图外文本）。

我编写了一个非常简单的指令，可用于Ionic 2和Ionic 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";
  }
}

以下是要点：

---

编辑：查看其他人的其他建议的要点。

如果它能为某人服务，我对benshope的解决方案做了一点修改，因为我需要文本区域增长，即使当用户进行回车时也是如此

因此，我没有监听输入值的变化（在执行回车时并不总是触发），而是在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);
        }
    };
}})();

只需安装： 鲍尔安装角弹性或

npm安装角弹性

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

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

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

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

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

---

从Ionic 4.4中，它是内置的，请参见

自动增长

属性：

---

使用ionic-5，有一个名为“自动增长”的选项，在视图中将其设置为true。 在css中，设置“最小高度”、“最大高度”以控制文本增长

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

此外，在上述修复之后，如果您在占位符文本中出现一些奇怪的行为，请在下面的文本区域中添加

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

---

不要用这个！当你删除你刚刚写的文字时不起作用。投票支持你的“更新2”，建议我们使用@benshope的答案。优雅的动作。谢谢！：）如果您有新行，此黑客将无法工作，并将垂直滚动文本移出视图。当文本区域缩小时，此产品会产生可怕的效果。我已修复了错误，并添加了一个代码笔来演示：）漂亮，简单！效验如神谢谢：）非常有效，但我需要测试

ta

是否存在于

adjust（）

中才能工作。类似于

if（ta）{ta.style…}

我也更喜欢编写自己的指令来安装npm——保存第三方npm-LIBRARY。这样，如果指令中出现错误，您可以修复自己的指令。谢谢分享！这是一个非常简单的答案，我不知道为什么这个答案在底部？

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

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