Question

我写了这个简单的函数，它工作正常，但我试图让它更好一些。

我有一个textarea，当滚动高度改变时调整大小，就是当我按下Enter键（即向下行 - \ n）时，它会更新高度跳跃，因为滚动高度仅在文本后更新进入。

现在我已经用css overflow:hidden解决了它，但它并不完美......我也试图抓住输入事件，但这是有问题的，因为高度变化太快了......

以下是相关代码的jsfiddle。

JS：

var app = angular.module('myModule', []);

app.controller('myCtrl', function ($scope, $timeout) {



    $scope.ModelData = "";

    $scope.modelScrollHeight = document.getElementById('textareaId').scrollHeight;

    $scope.getScrollHeight = function(){
     $scope.modelScrollHeight  = document.getElementById('textareaId').scrollHeight;;
     return  $scope.modelScrollHeight;
    }


});

HTML：

<div ng-controller = "myCtrl"> 
  <div class="omeromer" style="" >
    <textarea
        ng-style="{'min-height':(!ModelData || ModelData.trim() === '') ? '40px' :  modelScrollHeight+'px'}"
        style="border: none;resize:none;border-color: #EFEFEF; " 
       ng-model="ModelData" ng-change="getScrollHeight()" id="textareaId" class="wm-noteList-text-overflow"
        > </textarea>
    <pre>"val: "{{ModelData|json}}</pre>
    <pre>"split "{{ModelData.split('\n').length - 1|json}}</pre>
    <pre>"length: "{{ModelData.length|json}}</pre>
     <pre>"scrollHeight: "{{modelScrollHeight|json}}</pre>


</div>

</div>

CSS：

.wm-noteList-text-overflow{

    width:200px;
    //overflow:hidden;
}

Answer 1

如何将调整大小函数放在angular的内部$formatters数组中？

A jsfiddle

app.directive('autoHeight', function () {

  return {
    require : '?ngModel',
    restrict: 'A',
    link    : function (scope, element, attrs, ngModel) {

      var node = element[0];

      function refresh () {

        node.style.height = null;
        node.style.height = node.scrollHeight + 'px';
      }

      if (ngModel) {

        ngModel.$formatters.push(function (value) {

          refresh();

          return value;
        });
      }

      element.on('input', refresh);
      refresh();
    }
  };
});

Answer 2

您是否尝试将ng-trim=false添加到textarea？它似乎可以解决问题。

否则，我会问here类似的问题，我建议尝试一些解决方案。

textarea高度等于滚动高度流问题

2 个答案: