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

Question

我有一个 contenteditable div，其中包含元素。我想要发生的是，当按下回车键时，在插入符当前所在的元素之后立即创建一个新的段落标签。我可以在按 Enter 键时创建段落标记，但我希望将脱字符号放置在段落标记文本末尾的结束符之前

这是一个演示:

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() 函数会派上用场。

Answer 1

有一个小故障:第一个“cool”总是获取光标，因为你是通过“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