我正在使用一个 contenteditable div,它可以选择包含内联 html 元素,例如标签“
” 在文本流中。
在某些时候,我需要抓取 contenteditable div 的插入符位置(光标位置),插入符(光标)位于 html 子元素之后。
我在 Firefox 的 javascript 中使用以下代码,它可以正确查找 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;
}
我找到document.selection;
适用于 Internet Explorer,但我认为它不适用于查找 contenteditable div 的插入符位置(光标位置)。
任何人都可以为我解决任何问题吗?
在下面的例子中我的光标位置位于 two
中的“t”和“w”之间
<div contenteditable="true"><p>one<br><b>t|wo</b></p></div>
我想在上面的示例中需要数字 14,因为我需要执行一些操作,此时我使用此 contenteditable div 作为 RichTextbox,并应用我的自定义样式
您好,我找到了 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
a selection
对象和range
获取当前插入符号或光标位置形式的对象contenteditable
div
或其他控制
我希望这个能帮上忙
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)