designMode iFrame获取光标位置

Question

我想获得可编辑iFrame的光标位置(使用designMode).这是我到目前为止的代码:

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

从那里,获取属性startOffset从该行的开头获取字符数,但不从iFrame文档的开头获取.我想获得相对于文档开头的光标位置.

请注意:我对设置光标位置不感兴趣; 我只是想得到它.

我希望此修复程序与Chrome/Safari/Firefox兼容; 不需要与IE兼容.

任何帮助将不胜感激.

Answer 1

以下内容基于此答案,但经过修改后可用于任何文档中的选择(例如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) );