如何使用 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
不会包含这些新行。
最佳答案
默认情况下,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/
关于angularjs - 在文本区域中插入制表符,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34631721/