textarea yükseklik eğimi akış hızı sorununu düzeltmek için

Question

Bu basit işlevi yazdım ve gayet iyi çalışıyor ama biraz daha iyi yapmaya çalışıyorum.

Kaydırma yüksekliği değiştiğinde yeniden boyutlandıran bir textarea'm var, yani enter tuşuna bastığımda (yani satır aşağı - \ n), kaydırma yüksekliği yalnızca metinden sonra güncelleştirildiğinden yüksek hızda bir sıçrama olur. girilir. İşte ...

Şimdilik ben css overflow:hidden ile çözdük ama onun değil mükemmel ... Ben de olayı girmek yakalamaya çalıştık ama yükseklik çok çabuk değişir çünkü sorunlu oldu söz konusu kod olan jsfiddle'dur.

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

Ne açısal iç $formatters dizisinde yeniden boyutlandırma işlevi koyarak olacak? Bir 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

Eğer textarea için ng-trim=false ekleyerek denediniz mi? Bu hile yapmak gibi görünüyor. Aksi halde, here numaralı telefondan benzer bir soru soruldu, burada önerilen çözümlerin bazılarını denemenizi tavsiye ediyorum.