text区域高度请求滚动高度流问题

textarea height equel to scrollheight flow issue

本文关键字：高度 问题 滚动 请求 区域 text      更新时间：2023-09-26

我写了这个简单的函数，它运行得很好，但我正在努力让它变得更好。

我有一个文本区域，当滚动高度改变时会调整大小，问题是当我按下回车键（即向下一行-''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;
}

将调整大小函数放在angular的内部$formatters数组中怎么样？

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

您是否尝试将ng-trim=false添加到文本区域？它似乎起了作用。

否则，这里也会提出类似的问题，我建议尝试那里提出的一些解决方案。

相关文章：