在contenteditable div中创建新元素后设置插入符号

我有一个可以理解的div，它里面有元素。 我想要做的是在按下回车键时，在插入符号当前所在的元素之后立即创建新的段落标记。 当我按下回车键时，我可以创建段落标记，但是我希望在结束前将插入符放置在段落标记文本的末尾处</ p>

这里有一个演示：

http://jsfiddle.net/qcf4d/1/

$(document).on('keypress', 'div[contenteditable="true"]', function(event) {


  //enter key
  if (event.which == 13) {
    //insert the paragraph after this element.
    $(window.getSelection().anchorNode.parentNode).after("<p>cool</p>");
  }

});

思考？ 我认为jquery focus（）函数会派上用场。

---

有一个小故障：第一个“酷”总是得到光标，因为你通过“id”得到它。 为了避免这个问题，我在追加它之前创建了一个<p>cool</p>元素，然后使用它来定位新的光标位置。

$(document).on('keypress', 'div[contenteditable="true"]', function(event) {

    if (event.which == 13) { // enter key
        event.preventDefault();

        //insert the paragraph after this element.
        var innerDiv = $("<p>cool</p>")
        var sel = window.getSelection()
        $(sel.anchorNode.parentNode).after(innerDiv);

        //set cursor at new position
        sel.collapse(innerDiv[0].firstChild, innerDiv.text().length);
    }    
});

的jsfiddle

和一个非jQ版本：

document.querySelector('div[contenteditable="true"]').addEventListener('keypress', function(event) {

    if (event.which == 13) { // enter key
        event.preventDefault();

        //insert the paragraph after this element.
        var innerDiv = document.createElement('p')
        innerDiv.innerHTML = 'cool'
        var sel = window.getSelection()
        var selElem = sel.anchorNode.parentNode
        selElem.parentNode.insertBefore(innerDiv, selElem.nextSibling)

        //set cursor at new position
        sel.collapse(innerDiv.firstChild, innerDiv.textContent.length);
    }
});

JSFiddle no-jQ

---

我找到了解决方案。 你可以通过它的ID得到新的段落，然后在该段文本的长度上设置插入符号：

$(document).on('keypress', 'div[contenteditable="true"]', function(event) {


//enter key
if (event.which == 13) {
    event.preventDefault();
    //insert the paragraph after this element.
    $(window.getSelection().anchorNode.parentNode).after("<p id='newParagraph'>cool</p>");

    //set cursor at new position
    var sel = window.getSelection();
    var innerDiv = document.getElementById('newParagraph');
    var innerDivText = innerDiv.firstChild;

    returnFocus = $("#newParagraph").text().length;
    sel.collapse(innerDivText, returnFocus);
    innerDiv.parentNode.focus();

}

});

http://jsfiddle.net/qcf4d/2/

如果任何人有更高效（或jQuery）的方式让我知道。

链接地址: http://www.djcxy.com/p/74327.html

上一篇: Set caret after creating new element in contenteditable div

下一篇: How to specifically set the caret position in a contenteditable div