javascript - 将光标移动到下一个 contentEditable - JQuery

Question

我特别想做的是，当我按下回车键时，它会创建一个新段落，然后光标会移动到或选择新的内容可编辑段落以开始输入，但我似乎无法找到一种方法来做到这一点。

/*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/