designMode iFrame 获取光标位置答案

【问题标题】：designMode iFrame Get Cursor PositiondesignMode iFrame 获取光标位置
【发布时间】：2011-12-29 05:58:11
【问题描述】：

我想获取可编辑 iFrame 的光标位置（使用 designMode）。这是我到目前为止的代码：

document.getElementById('iframe_id').contentWindow.document.getSelection().getRangeAt(0)

从那里获取属性startOffset 获取该行开头的字符数，而不是iFrame 文档开头的字符数。我想获取相对于文档开头的光标位置。

请注意：我不对设置光标位置感兴趣；我只是想得到它。

我希望修复与 Chrome/Safari/Firefox 兼容；不需要与 IE 兼容。

任何帮助将不胜感激。

【问题讨论】：

标签： javascript iframe designmode

【解决方案1】：

以下内容基于this answer，但经过修改以适用于任何文档中的选择（例如 iframe 中的选择）。该答案中对这种方法的幼稚提出的相同警告仍然适用。

function getCaretCharacterOffsetWithin(element) {
    var doc = element.ownerDocument || element.document;
    var win = doc.defaultView || doc.parentWindow;
    var sel, range, preCaretRange, caretOffset = 0;
    if (typeof win.getSelection != "undefined") {
        sel = win.getSelection();
        if (sel.rangeCount) {
            range = sel.getRangeAt(0);
            preCaretRange = range.cloneRange();
            preCaretRange.selectNodeContents(element);
            preCaretRange.setEnd(range.endContainer, range.endOffset);
            caretOffset = preCaretRange.toString().length;
        }
    } else if ( (sel = doc.selection) && sel.type != "Control") {
        range = doc.selection.createRange();
        preCaretRange = doc.body.createTextRange();
        preCaretRange.moveToElementText(element);
        preCaretRange.setEndPoint("EndToEnd", textRange);
        caretOffset = preCaretTextRange.text.length;
    }
    return caretOffset;
}

示例用法：

var iframe = document.getElementById("foo");
var iframeBody = (iframe.contentDocument || iframe.contentWindow.document).body;
alert( getCaretCharacterOffsetWithin(iframeBody) );

【讨论】：

【解决方案2】：

这对我有用

function getCaretPosition() {
var element = document.idEditbox.document.body; // just my content IFRAME
var doc = element.ownerDocument || element.document;
var win = doc.defaultView || doc.parentWindow;
var sel, range, preCaretRange, caretOffset = 0;
if (typeof win.getSelection != "undefined") {
    sel = win.getSelection();
    if (sel.rangeCount) {
        range = sel.getRangeAt(0);
        preCaretRange = range.cloneRange();
        preCaretRange.selectNodeContents(element);
        preCaretRange.setEnd(range.endContainer, range.endOffset);
        caretOffset = preCaretRange.toString().length;
    }
} else if ( (sel = doc.selection) && sel.type != "Control") {
    range = doc.selection.createRange();
var tempRange = range.duplicate();
    preCaretRange = doc.body.createTextRange();
    preCaretRange.moveToElementText(element);
    preCaretRange.setEndPoint("EndToEnd", tempRange);
    caretOffset = preCaretRange.text.length;
}
return caretOffset;

}

【讨论】：