我正在将 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 之外的所有浏览器上都工作得非常好,它会忽略光标的位置并将 SelectionStart 和 End 属性设置回 0。
我调查了这个问题,发现如果我将 div“添加”更改为按钮,它将在 Edge 中按预期工作,但如果可能的话,我更希望能够使用 div。
我是否错过了某些内容,或者这是浏览器的错误?
最佳答案
Edge 需要在使用 selectionStart
或 selectionEnd
之前设置 focus()
。
其他浏览器似乎从正在使用的元素的上下文中获取焦点。我在浏览器中使用 JS 时遇到了这个问题,之前没有使用过 Angular,但这个问题似乎在两者中都很常见。
下面修改后的代码适用于 Plunker。
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) {
domElement.focus();
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.selectionStart = startPos + val.length;
domElement.selectionEnd = startPos + val.length;
domElement.scrollTop = scrollTop;
} else {
domElement.value += val;
domElement.focus();
}
});
}
}
}])
如果有人对非 Angular 版本感兴趣,以下是我使用的版本。该代码由按钮调用,其中 textareaElement 可以选择文本:
var el= document.getElementById('textareaElement');
var selectionStart = el.selectionStart;
var selectionEnd = el.selectionEnd ;
//selectionStart and selectionEnd are always 0 in Edge
var el= document.getElementById('textareaElement');
el.focus();
var selectionStart = el.selectionStart;
var selectionEnd = el.selectionEnd;
//selectionStart and selectionEnd are where textareaElement's selected text start and end in Edge (and other browsers)
关于javascript - Microsoft Edge 上的 SelectionStart 属性存在问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39468258/