将光标移动到下一个内容可编辑 - JQuery

Move cursor to next contentEditable - JQuery

本文关键字：编辑 JQuery 光标 移动 下一个      更新时间：2023-09-26

我特别想做的是，当我按 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，将焦点设置在新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/

相关文章：