Question

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

这是一个演示：

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

有一个小问题：第一个“酷”总是得到光标，因为你是通过“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

一个no-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

Answer 2

我找到了解决方案。您可以通过其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）的方式，请告诉我。

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

2 个答案: