在离子中自动生长文本区域

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

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

这将改变你所有的文本区域的大小。

希望有帮助!

我写了一个非常简单的指令，与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

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

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

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

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

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

更新2:使用@benshope

更新3:如果你使用Ionic/Angular 2，请使用"Max Al Farakh"提供的答案

试试Angular-Elastic。这是一个angular指令，用来自动展开文本区域。使用电源安装

bower install angular-elastic

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

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

或作为class

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

从Ionic 4.4它是内置的，参见autoGrow属性:

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

你是说垂直自动生长吗?我试过了:

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

有点粗糙，但是在确定了预期的列长度之后，让我们基于输入文本的长度来定义行长度。当我开始打字时，它开始垂直生长!

对于ionic-5，有一个名为auto-grow的选项，请在视图中将其设置为true。在css中，设置min-height, max-height，来控制文本的生长。

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

同样，在上面的修复之后，如果您在占位符文本中得到一些奇怪的行为，请在离子文本区域

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

如果它可以为某人服务，我改变了一点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);
        }
    };
}})();

just_install:安装角弹性或

npm install angular-elastic;

然后在index.html中导入elastic.js文件，如下所示

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

之后把它注入到你的angular模块中，像这样:

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

在你的HTML文件之后，在你的页脚栏这样做:

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