对window.getSelection()api感到困惑

时间:2016-12-12 19:13:57

标签: javascript jquery html html5 internet-explorer

我正在使用带有html5的div = contenteditable =" true"属性将其用作编辑器。我正在使用window.getSelection()api。

在插入位置插入单词

但它在IE11中表现不同。

当我在加载页面后在chrome控制台中键入window.getSelection()时,它返回了body元素。

enter image description here

在IE-11控制台返回文本节点时也是如此,因为在插入位置处插入文本无法正常工作。

enter image description here

以下是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);
                    }
                }

我错过了什么吗?

1 个答案:

答案 0 :(得分:0)

最后我发现在我的CSS中我使用了以下属性来导致问题的编辑器。

-ms-user-select: none