javascript - 意味 - ionic textarea resize

角度弾性を試してみてください。 これは、テキストエリアを自動拡張するために作成された角度指示です。 それをインストールするためにバワーを使用してください。

bower install angular-elastic

それをあなたのプロジェクトに追加すると、それを属性として使うことができます

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

またはクラスとして

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

垂直に自動成長するのですか？ 私はこれを試した：

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

私はこれが将来この問題に直面するかもしれない他の人々に役立つことを願っています。

アップデート：これはcodepenです： http ://codepen.io/kpourdeilami/pen/KDepk

アップデート2： @benshopeが提供するスニペットを使用する

アップデート3：イオン/角度2の場合は、「Max Al Farakh」の答えを使用してください

それが誰かに役立つことができれば、私は、ユーザーが復帰してもテキストエリアが成長する必要があったので、少しだけbenshopeのソリューションを変更しました。

そのため、入力値の変更（キャリッジリターン時に必ず発生するとは限りません）を聞くのではなく、 inputイベントをテキストエリアでリッスンし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);
        }
    };
}})();