Question

我正在使用一个可信的div，它可以选择内联html元素，例如标签“＆lt; p＆gt;＆lt; font＆gt;＆lt; br＆gt; “在文本流程中。

在某些点我需要获取contenteditable div的插入位置（光标位置），插入符号（光标）位于html子元素之后。

我在javascript for Firefox中使用以下代码，它可以正确找到contenteditable div的插入位置（光标位置），但我找不到任何解决方案让Internet Explorer找到插入位置（光标位置）为{{1}是未定义的。

window.getSelection

我发现function getCaretPosition() { if (window.getSelection && window.getSelection().getRangeAt) { var range = window.getSelection().getRangeAt(0); var selectedObj = window.getSelection(); var rangeCount = 0; var childNodes = selectedObj.anchorNode.parentNode.childNodes; for (var i = 0; i < childNodes.length; i++) { if (childNodes[i] == selectedObj.anchorNode) { break; } if (childNodes[i].outerHTML) rangeCount += childNodes[i].outerHTML.length; else if (childNodes[i].nodeType == 3) { rangeCount += childNodes[i].textContent.length; } } return range.startOffset + rangeCount; } return -1; }适用于Internet Expolrer，但我认为找不到令人满意的div的插入位置（光标位置）对我有用。

任何人都可以为我做任何工作。

在下面的示例中，我的光标位置位于＆lt; p＆gt;二＆lt; / p＆gt; 中的't'和'w'之间 document.selection;我想在上面的例子中需要14号因为我需要在那一点上执行一些操作我正在使用这个contenteditable div作为RichTextbox并且我的自定义样式适用于它

Answer 1

您好我找到了Internet Explorer 8或更低版本的答案

       var cursorPosition=0;    
       if (document.selection && document.selection.createRange) {
            range = document.selection.createRange();
            if (range.parentElement() == YourEditableControl) {
                var tmpEle = document.createElement("span");
                YourEditableControl.insertBefore(tmpEle, YourEditableControl.firstChild);
                var tmpRange = range.duplicate();
                tmpRange.moveToElementText(tmpEle);
                tmpRange.setEndPoint("EndToEnd", range);
                cursorPosition= tmpRange.text.length;
            }
        }

上面的代码解决了我的问题，找到IE8或以下版本的当前光标位置因为window.getSelection（）是针对IE8或更低版本而设计的，并且适用于IE9

因此可以使用document.selection selection个对象和range对象来获取当前插入符号或光标位置形式contenteditable div或其他控件

我希望这会有所帮助

如何在Internet Explorer中使用html子元素在contenteditable div中获取插入位置

1 个答案: