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

Question

我有一个可以自由使用的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（）函数会派上用场。

Answer 1

我找到了解决方案。你可以通过它的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的）方式让我知道。

Answer 2

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