我使用一个带有html5 contenteditable="true“属性的div来将其用作编辑器。我使用window.getSelection()接口在插入符号位置插入单词。
但它在IE11中的表现有所不同。
页面加载后,当我在chrome控制台中输入window.getSelection()时,它返回body元素。
同样的事情在IE-11控制台返回文本节点,由于在插入符号位置插入文本不能正常工作。
下面是pasteTextAtCaret()函数的代码
var ele = $(".editor");
function pasteHtmlAtCaret(html) {
if(!ele.is(':focus')) {ele.focus();}
var sel, range;
if (window.getSelection) {
// IE9 and non-IE
sel = window.getSelection();
if (sel.getRangeAt && sel.rangeCount) {
range = sel.getRangeAt(0);
range.deleteContents();
// Range.createContextualFragment() would be useful here but is
// non-standard and not supported in all browsers (IE9, for one)
var el = document.createElement("div");
el.innerHTML = html;
var frag = document.createDocumentFragment(), node, lastNode;
while ((node = el.firstChild)) {
lastNode = frag.appendChild(node);
}
range.insertNode(frag);
// Preserve the selection
if (lastNode) {
range = range.cloneRange();
range.setStartAfter(lastNode);
range.collapse(true);
sel.removeAllRanges();
sel.addRange(range);
}
}
} else if (document.selection && document.selection.type !== "Control") {
// IE < 9
document.selection.createRange().pasteHTML(html);
}
}
我错过了什么吗?
发布于 2016-12-13 06:27:22
最后,我发现在我的css中,我对编辑器使用了下面的属性,正是这个属性导致了这个问题。
-ms-user-select: none
https://stackoverflow.com/questions/41107898
复制相似问题