在文本区域中插入制表符

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

默认情况下，除非您使用 ng-trim="false".

，否则 ngModel 将在最后 trim 白色 space

来源：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，它可以像文本编辑器一样在单行或多行上接受带有制表符或 shift 制表符的格式化文本。它不需要任何其他 JS 库。

在文本区域中插入制表符

Insert tab character in textarea

textarea

angularjs