Microsoft Edge上的SelectionStart属性问题
Issue with SelectionStart property on Microsoft Edge
我正在实现一个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 "add"更改为按钮,它将在Edge中按预期工作,但如果可能的话,我更希望能够使用div。
我在这里错过了什么,还是这是浏览器的一个bug ?
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 Pub/Sub属性访问问题
- 使用导航属性创建Kendo UI网格模型的问题
- 使用jQuery设置HTML5属性值时出现问题
- 将输入值设置为ng模型属性[Angular]时出现问题
- 我该如何解决这个问题?“未捕获的类型错误:无法读取 null 的属性'appendChild'”
- 奇怪的数据属性布尔问题
- HTML:密码字段中的HTML5占位符属性问题 - 显示正常文本
- 更改 img src 属性问题
- 访问Javascript对象属性问题
- 声明javascript对象属性问题
- 环回相关的模型属性问题
- 文本框只读属性问题与我的struts应用程序
- JavaScript中的搜索栏样式属性问题
- 框架"src"属性问题
- 类和属性问题
- Microsoft Edge上的SelectionStart属性问题
- Javascript压缩和对象属性问题
- CSS使用JavaScript在表中显示属性问题
- img属性问题re:IE-->赢得't显示图像的本机宽度,恢复为1px宽
- jQuery html属性问题