javascript - 控制字符(\n、\t 等)不会立即在文本区域输入中更新

Question

我的第一个问题是，如果我在 textarea 中点击 Tab 并开始输入，它包含的值开头没有 \t 字符的字符串。 (无论在键入普通文本之前按下 Tab 键多少次)。

第二期。键入一些文本并点击 Tab 后，\t 字符再次没有出现在值中。但是，如果此时我继续输入文本，textarea 中的值现在包含该位置预期的 \t 字符。如果我输入 Enter，就会出现这种情况，\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

Angular 自动 trim 输入值。在输入标签上设置 ng-trim="false" 以禁用默认 trim 。

ngTrim

If set to false Angular will not automatically trim the input. This parameter is ignored for input[type=password] controls, which will never trim the input.

(default: 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>