[英]How to get caret position within contenteditable div with html child elements in Internet Explorer
I am working with a contenteditable div that will have the option to have inline html elements such as tags " <p> <font> <br> " in the text flow. 我正在使用一个contenteditable div,它可以选择在文本流中使用内联html元素,例如标记“<p> <font> <br>”。
At certain points I need to grab the caret position(cursor position) of contenteditable div, the caret(cursor) is after an html child element. 在某些点我需要获取contenteditable div的插入位置(光标位置),插入符号(光标)位于html子元素之后。
i am using following code in javascript for Firefox it works correctly to find caret position(cursor position) of contenteditable div, but i does not find any solution for Internet Explorer to find caret position (cursor position) as window.getSelection
is undefined. 我正在使用javascript for Firefox中的以下代码,它可以正确找到contenteditable div的插入位置(光标位置),但我找不到任何解决方案,因为Internet Explorer找到插入位置(光标位置)为
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;
}
i found that document.selection;
我发现了
document.selection;
works on Internet Expolrer but i don't think it will work for me to find caret position(cursor position) of contenteditable div. 适用于Internet Expolrer,但我认为它不适合我找到contenteditable div的插入位置(光标位置)。
can any one have any work around for me. 任何人都可以为我做任何工作。
in below example my cursor position is at between 't' and 'w' in <p>two</p> <div contenteditable="true"><p>one<br><b>t|wo</b></p></div>
i suppose to need number 14 in above example as i need to perform some operation at that point i am using this contenteditable div as RichTextbox with my custom style apply to it 在下面的例子中,我的光标位置在<p>中的't'和'w'之间</ p>
<div contenteditable="true"><p>one<br><b>t|wo</b></p></div>
我想在上面的例子中需要14号因为我需要在那一点上执行一些操作我正在使用这个contenteditable div作为RichTextbox我的自定义样式适用于它
Hi i found answer for internet explorer version 8 or below 您好我找到了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;
}
}
above code solve my problem to find current cursor position for IE8 or below version as window.getSelection() is undifined for IE8 or below and works fine with IE9 上面的代码解决了我的问题,找到了IE8或以下版本的当前光标位置,因为window.getSelection()是针对IE8或更低版本的unifined并且可以正常使用IE9
so one can use document.selection
a selection
object and range
object to get current caret or cursor position form contenteditable
div
or other control 所以可以使用
document.selection
selection
对象和range
对象来获取当前插入符号或光标位置形式contenteditable
div
或其他控件
i hope this will help 我希望这个能帮上忙
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.