在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