javascript - textcontent - textarea html content



自動生長在離子的textarea (4)

我想添加一個自動生長的textarea到我的應用程序,但由於某種原因,它不工作。 我使用的模塊是https://github.com/tagged/autogrow (它在離子論壇上被推薦)

https://src-bin.com


Answer #1

嘗試角彈性。 這是一個用於自動擴展textarea的角度指令。 使用涼亭來安裝它。

bower install angular-elastic

將其添加到您的項目中,然後您可以將其用作屬性

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

或作為類

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

Answer #2

你的意思是垂直自動增長嗎? 我試過這個:

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

有點hackish,但確定了預期的列長度之後,讓我們根據輸入的文本的長度定義行長度。 當我開始打字時,它開始垂直增長! (不滾動/不在視圖文本)。


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>

我希望這能幫助那些將來可能面臨這個問題的人。

更新:這是一個codepen這個: http ://codepen.io/kpourdeilami/pen/KDepk

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

更新3:如果您使用Ionic / Angular 2,請使用“Max Al Farakh”提供的答案


Answer #4

如果它可以服務於某人,我改變了一點benshope的解決方案,因為即使用戶做回車,我也需要textarea的增長。

所以,而不是聽輸入值的變化(這不是總是在做一個回車時觸發)我listent input事件在textarea。

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




ionic-framework