Question

当我点击一个有问题的元素时，我正试图获取光标位置，我已经找到了回答here的相同问题并且它大部分时间都有效，但在以下情况下存在问题：

我为contentEditable添加了5px的保证金。

如果你把光标放在第一行的开头，它会显示5px的左边位置，这是正确的，如果你把光标放在第二行的开头，它显示的是一个大于5px的数字

注意：仅为清晰起见而添加5px的保证金，即使没有保证金，问题仍然存在

有没有解决方法？

jsfiddle的代码：

HTML：

<div contenteditable="true" style="margin:5px;">
<span>Lorem <em>ipsum</em> dolor</span> sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
<code>Lorem ipsum</code> dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
<br>
<strong style="font-weight:bold;">Coords :</strong> <span id="coords"></span>
</div>

javascript：

function getSelectionCoords(win) {
    win = win || window;
    var doc = win.document;
    var sel = doc.selection, range, rects, rect;
    var x = 0, y = 0;
    if (sel) {
        if (sel.type != "Control") {
            range = sel.createRange();
            range.collapse(true);
            x = range.boundingLeft;
            y = range.boundingTop;
        }
    } else if (win.getSelection) {
        sel = win.getSelection();
        if (sel.rangeCount) {
            range = sel.getRangeAt(0).cloneRange();
            if (range.getClientRects) {
                range.collapse(true);
                rects = range.getClientRects();
                if (rects.length > 0) {
                    rect = rects[0];
                }
                x = rect.left;
                y = rect.top;
            }
            // Fall back to inserting a temporary element
            if (x == 0 && y == 0) {
                var span = doc.createElement("span");
                if (span.getClientRects) {
                    // Ensure span has dimensions and position by
                    // adding a zero-width space character
                    span.appendChild( doc.createTextNode("\u200b") );
                    range.insertNode(span);
                    rect = span.getClientRects()[0];
                    x = rect.left;
                    y = rect.top;
                    var spanParent = span.parentNode;
                    spanParent.removeChild(span);

                    // Glue any broken text nodes back together
                    spanParent.normalize();
                }
            }
        }
    }
    return { x: x, y: y };
}

document.onmouseup = function() {
    var coords = getSelectionCoords(window);
    document.getElementById("coords").innerHTML = coords.x + ", " + coords.y;
};

获取contentEditable中光标的位置会返回错误的位置

0 个答案: