Question

如何使用AngularJS在textarea中插入制表符（缩进）？

我试过了：

<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

默认情况下，除非您使用ng-trim="false"，否则ngModel会在末尾修剪空白区域。

来源：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/

Answer 2

看看 my pen，它可以接受带有制表符或换档制表符的格式化文字，就像文本编辑器一样。它不需要任何其他JS库。

在textarea中插入制表符

2 个答案: