javascript - textarea 高度等于 scrollheight 流问题

Question

我编写了这个简单的函数，它工作正常，但我正在努力让它变得更好一点。

我有一个文本区域，它会在滚动高度发生变化时调整大小，问题是当我按下回车键(即向下一行 -\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();
    }
  };
});