文本区域输入中的控制字符( 、 等）不会立即更新

control characters ( , , etc) are not being updated in the textarea input immediately

本文关键字：更新 输入 区域 控制字符 文本      更新时间：2023-09-26

我的第一个问题是，在文本区域中，如果我在选项卡为空并开始键入时，它所包含的值在字符串的开头没有't字符。（无论在键入正常文本之前按了多少次制表键）。

第二个问题。在键入一些文本并点击选项卡后，'t字符不会再次出现在值中。但是，如果我现在继续键入文本，那么文本区域中的值现在包含该位置预期的'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>

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

ngTrim

如果设置为false，Angular将不会自动修剪输入。这输入[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>

相关文章：