angularjs - 在文本区域中插入制表符

Question

如何使用 AngularJS 在文本区域内插入制表符(缩进)？

我尝试过这个:

<textarea class="form-control" rows="10" ng-model="vm.text" ng-keydown="vm.handleTabKey($event)"></textarea>

函数handleTabKey为:

function handleTabKey(e) {
  if (e.which === 9) {
    e.preventDefault();
    var start = e.target.selectionStart;
    var end = e.target.selectionEnd;
    vm.text = vm.text.substring(0, start) + '\t' + vm.text.substring(end);
    e.target.selectionStart = e.target.selectionEnd = start + 1;
  }
};

虽然插入了制表符，但插入符位置始终位于末尾，尽管最后一行。

另一个问题是，如果我在末尾插入一个或多个新行，按 tab 会在新行之前的行尾插入一个制表符，就好像忽略它们一样。换句话说，在输入非空白字符之前，vm.text 不会包含这些新行。

Answer 1

默认情况下，ngModel 将修剪末尾的空白，除非您使用 ng-trim="false"。

来源:https://github.com/angular/angular.js/issues/2010

关于光标位置，我认为您需要定位该元素并使用 .setSelectionRange()反而。

更新

基于您的 JSFiddle，我能够使用它来设置光标位置:

angular.element(e.target).val(vm.text.substring(0, start) + '\t' + vm.text.substring(end));

工作 JSFiddle: https://jsfiddle.net/7bee7nuc/2/

更新2

前面的代码片段无法插入连续的制表符。为此，必须更新 vm.text 以及目标元素。

更新了 JSFiddle:https://jsfiddle.net/7bee7nuc/3/