如何根据插入位置拆分可信内容

Question

问题1

让我们假设这是一个满足元素的内在内容

abc def ghi j|kl mno pqr

光标在j和k之间。如何将内容分成两部分以使光标前的内容为

abc def ghi j

光标后面的内容

kl mno pqr

问题2

我还想将光标的位置放到父元素

cursorX = $parentEl.width() - position of cursor from left;
cursorY = $parentEl.height() - position of cursor from top;

Answer 1

问题1

cursorPos = window.getSelection().anchorOffset;
allContents = document.getElementById('element').innerHTML;
contentsBeforeCursor = allContents.substring(0, cursorPos);
contentsAfterCursor = allContents.substring(cursorPos, allContents.length);

如果您的contentedable元素包含HTML元素。您需要忽略HTML标记来获取插入位置，并仅选择文本内容而不是html内容。所以你可以使用下面这个

node = document.getElementById('element');
cursorPos = getCaretCharacterOffsetWithin(node);
allContents = node.innerText;
contentsBeforeCursor = allContents.substring(0, cursorPos);
contentsAfterCursor = allContents.substring(cursorPos, allContents.length);

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

问题2

var coords = getSelectionCoords(),
pageX = coords.x,
pageY = coords.y;
elTop = $('#element').offset().top;
elLeft = $('#element').offset().left;
posFromTop = pageY - elTop;
posFromLeft = pageX - elLeft;

function getSelectionCoords() {
    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();
            // 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 };
}

Answer 2

您可以在此处找到问题1的答案：

＆＃13;

＆＃13;

function doIt() {
  var res = document.getElementById("someId").selectionStart
  var res2 = document.getElementById("someId").value.substring(0, res)
  var res3 = document.getElementById("someId").value.substring(res)
  console.log(res2);
  console.log(res3)
}

＆＃13;

<input type="text" id="someId" onclick="doIt()" value="abc def" />

＆＃13;

＆＃13;

＆＃13;