Переместить курсор к следующему contentEditable - JQuery

Question

Что я конкретно хочу сделать, так это то, что когда я нажимаю Enter, он создает новый абзац, после которого курсор перемещается или выбирает новый редактируемый абзац контента, чтобы начать печатать, но я не могу найти способ сделать это.

/*HTML Layout*/
<div id="wrap" contenteditable="true">
|| <----cursor posiiton
//*New paragraph content editable when enter is pressed
<p contenteditable="true">New Paragrpah</p>
</div>

/* JQuery Code */
if(event.which == 13){
event.preventDefault();
elem.append('<p>insert a new paragraph</p>');
$('#container *').attr('contenteditable','true');
$('p', elem).focus();}

У кого-нибудь есть понимание? будет высоко ценится.

Я знаю, что это возможно сделать с полями ввода и .focus (), но это не будет работать с contentEditable, должен быть способ сделать это.

С наилучшими пожеланиями, Патрик

Answer 1

Отключить родительский contenteditable, установить фокус на новый contenteditable, включить родительский contenteditable и вернуться к родительскому contenteditable (в некоторых браузерах вы не сможете выйти за пределы текущего, иначе.

$(window).keydown(function(event){

if(event.which == 13){

    event.preventDefault();

    var p = $('<p />').text("insert a new paragraph").attr('contenteditable','true').appendTo($('#wrap'));
   $('#wrap').attr('contenteditable','false');
   $(p).focus();
   $('#wrap').attr('contenteditable','true').focus();  

}

});

Пример: http://jsfiddle.net/niklasvh/6AsHq/