控制字符（\ n，\ t等）沒有被立即更新在textarea輸入

Question

我的第一個問題是，在文本區域，如果我點擊標籤，當它的空和開始輸入時，它包含的值不在字符串的開始處有\t字符。 （不管在輸入普通文本之前按Tab鍵多少次）。

第二個問題。鍵入後是一些文本，並打選項卡，再次\t字符不會出現在該值。但是，如果此時恢復鍵入文本，textarea中的值現在包含該位置處的\t字符。如果我輸入輸入，\n字符不會出現;但如果我繼續打字，它會像以前一樣出現？

如何處理這兩個問題？

angular.module('myapp', []) 
 
    .controller('MainCtrl', function($scope) { 
 
    $scope.foo = { 
 
     txt: '' 
 
    }; 
 

 
    $scope.kd = function(e) { 
 

 
     if (e.keyCode === 9) { 
 
     var ta = angular.element(e.target); 
 
     var val = ta.val(); 
 
     var st = ta[0].selectionStart, 
 
      ed = ta[0].selectionEnd; 
 
     ta.val(val.substring(0, st) + '\t' + val.substring(ed)); 
 
     ta[0].selectionStart = ta[0].selectionEnd = st + 1; 
 
     //console.log(ta.triggerHandler); 
 
     ta.triggerHandler('change'); 
 
     e.preventDefault(); 
 
     } 
 
    } 
 
    });

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.8/angular.js"></script> 
 
<div ng-app="myapp"> 
 
    <div ng-controller="MainCtrl"> 
 
    <textarea ng-model="foo.txt" rows="10" cols="75" ng-keydown="kd($event)"></textarea> 
 
    <br> 
 
    <br> 
 
    <pre> 
 
     {{ foo | json }} 
 
    </pre> 
 
    </div> 
 
</div>

Answer 1

角自動裁剪的輸入值。在輸入標籤上設置ng-trim="false"以禁用默認修整。

ngTrim

如果設置爲false角不會自動修正輸入。對於輸入[type = password]控件，此 參數將被忽略， 不會修剪輸入。

（默認值：true）

angular.module('myapp', []) 
 
    .controller('MainCtrl', function($scope) { 
 
    $scope.foo = { 
 
     txt: '' 
 
    }; 
 

 
    $scope.kd = function(e) { 
 

 
     if (e.keyCode === 9) { 
 
     var ta = angular.element(e.target); 
 
     var val = ta.val(); 
 
     var st = ta[0].selectionStart, 
 
      ed = ta[0].selectionEnd; 
 
     ta.val(val.substring(0, st) + '\t' + val.substring(ed)); 
 
     ta[0].selectionStart = ta[0].selectionEnd = st + 1; 
 
     //console.log(ta.triggerHandler); 
 
     ta.triggerHandler('change'); 
 
     e.preventDefault(); 
 
     } 
 
    } 
 
    });

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<div ng-app="myapp"> 
 
    <div ng-controller="MainCtrl"> 
 
    <textarea ng-model="foo.txt" rows="10" cols="75" ng-trim="false" ng-keydown="kd($event)"></textarea> 
 
    <br> 
 
    <br> 
 
    <pre> 
 
     {{ foo | json }} 
 
    </pre> 
 
    </div> 
 
</div>