Contenteditable / jQuery / Javascript - выберите текст от курсора / каретки до конца абзаца

Question

Я пытаюсь создать новый абзац при нажатии клавиши ввода. Я могу сделать это, и это работает хорошо. Но теперь скажем, что курсор находится в середине абзаца - когда нажата клавиша ввода, я пытаюсь выбрать диапазон от позиции курсора до конца абзаца. Удалите это из существующего абзаца и добавьте его в новый абзац ниже.

Я пытаюсь изменить код, найденный в ответе здесь: Contenteditable - извлекать текст из каретки в конец элемента

$(document).on('keydown', 'p[contenteditable="true"]', function(e) {
    if(e.which == 13) { //new paragraph on enter/return
        e.preventDefault();
        var sel = window.getSelection();
    if (sel.rangeCount) {
        var selRange = sel.getRangeAt(0);
        var blockEl = selRange.endContainer.parentNode;
        var range = selRange.cloneRange();
            range.selectNodeContents(blockEl);
            range.setStart(selRange.endContainer, selRange.endOffset);
            remainingText = range.extractContents();
        $(this).after('<p contenteditable = "true">'+ remainingText +'</p>');
        $(this).next('p').focus();

    }

У меня не было особого успеха - в основном из-за моего непонимания, когда дело доходит до объектов диапазона, узлов и выбора. Может ли кто-нибудь объяснить, как эти объекты работают и как я могу адаптировать ответ выше, чтобы соответствовать моей ситуации.

http://jsfiddle.net/UU4Cg/17/

Answer 1

Вот некоторый код, адаптированный из другого ответа для удаления зависимости Rangy:

var sel = window.getSelection();
if (sel.rangeCount > 0) {
    // Create a copy of the selection range to work with
    var range = sel.getRangeAt(0).cloneRange();

    // Get the containing paragraph
    var p = range.commonAncestorContainer;
    while (p && (p.nodeType != 1 || p.tagName != "P") ) {
        p = p.parentNode;
    }

    if (p) {
        // Place the end of the range after the paragraph
        range.setEndAfter(p);

        // Extract the contents of the paragraph after the caret into a fragment
        var contentAfterRangeStart = range.extractContents();

        // Collapse the range immediately after the paragraph
        range.setStartAfter(p);
        range.collapse(true);

        // Insert the content
        range.insertNode(contentAfterRangeStart);

        // Move the caret to the insertion point
        range.setStartAfter(p);
        range.collapse(true);
        sel.removeAllRanges();
        sel.addRange(range);
    }
}

Answer 2

Версия подстроки:

$(document).on('keydown', 'p[contenteditable="true"]', function(e) {
    if(e.which == 13) { //new paragraph on enter/return
        e.preventDefault();
        cursorIndex = window.getSelection().getRangeAt(0).startOffset;
        textBefore = $(this).text().substring(0, cursorIndex);
        textAfter = $(this).text().substring(cursorIndex);
        $(this).text(textBefore); 
        $(this).after('<p contenteditable = "true">'+ textAfter +'</p>');
        $(this).next('p').focus();

    }
}

Answer 3

Попробуй это.

      function placeCaretAtEnd(el) {
        el.focus();
        if (typeof window.getSelection != "undefined"
        && typeof document.createRange != "undefined") {
            var range = document.createRange();

            range.selectNodeContents(el);
            range.collapse(false);
            var sel = window.getSelection();
            sel.removeAllRanges();
            sel.addRange(range);
        } else if (typeof document.body.createTextRange != "undefined") {
            var textRange = document.body.createTextRange();
            textRange.moveToElementText(el);
            textRange.collapse(false);
            textRange.select();
        }
    }