我在文本区域中实现了一个angularJS文本插入器,它可以在文本区域中的光标位置插入指定的文本。
指令的主体在这里
app.directive('myText', ['$rootScope', function($rootScope) {
return {
link: function(scope, element, attrs) {
$rootScope.$on('add', function(e, val) {
var domElement = element[0];
if (document.selection) {
domElement.focus();
var sel = document.selection.createRange();
sel.text = val;
domElement.focus();
} else if (domElement.selectionStart || domElement.selectionStart === 0) {
var startPos = domElement.selectionStart;
var endPos = domElement.selectionEnd;
var scrollTop = domElement.scrollTop;
domElement.value = domElement.value.substring(0, startPos) + val + domElement.value.substring(endPos, domElement.value.length);
domElement.focus();
domElement.selectionStart = startPos + val.length;
domElement.selectionEnd = startPos + val.length;
domElement.scrollTop = scrollTop;
} else {
domElement.value += val;
domElement.focus();
}
});
}
}
}])
可在此处找到一个工作示例http://plnkr.co/edit/f496Mh?p=preview
这在除Microsoft Edge之外的所有浏览器上都能正常工作,Microsoft Edge忽略光标的位置并将selectionStart和End属性设置回0。
我已经调查了这个问题,发现如果我改变div“添加”到一个按钮,它将工作在边缘预期,但更喜欢能够使用一个div,如果在所有possible。
我错过了什么吗?还是浏览器有问题?
1条答案
按热度按时间mzmfm0qo1#
使用
selectionStart
或selectionEnd
之前,Edge需要设置focus()
。其他浏览器似乎从所使用的元素的上下文来假设焦点。我在浏览器中使用JS时遇到了这个问题,以前没有使用过Angular,但这个问题似乎在两者中都很常见。
以下修改后的代码可在Plunker中使用。
如果有人对非Angular版本感兴趣,下面是我使用的代码。代码由一个按钮调用,textareaElement可以在其中选择文本: