在textarea中插入制表符

如何在使用AngularJS的textarea中插入制表符（缩进）？在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不包含这些新行。

来源

2016-01-06 someguy

默认情况下，除非您使用ng-trim="false"，否则ngModel将在最后裁剪空白区域。

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

关于光标位置，我认为你需要为目标的元素，并使用.setSelectionRange()代替。

UPDATE

根据您的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/

来源

2016-01-06 11:31:20

谢谢，这解决了第二个问题，但它并没有解决第一个问题。 – someguy

尝试添加'e.stopPropagation（）;'以确保没有其他事件处理程序在你之后被调用。 –

不幸的是，这并没有奏效。 – someguy

看一看my pen，它可以接受在一行或多行就像一个文本编辑器选项卡或移制表符格式的文本。它不需要任何其他的JS库。

来源

2016-02-05 18:39:30 ZulNs

在textarea中插入制表符

回答

相关问题