编程语言
首页 > 编程语言> > javascript – 将光标移动到下一个contentEditable – JQuery

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

作者:互联网

我特意要做的是当我按下输入它创建一个新的段落光标然后移动或选择新的内容可编辑段落开始输入但我似乎无法找到一种方法来做到这一点.

/*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,将焦点设置为new contenteditable,启用parent 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/

标签:jquery,javascript,html5,text-editor,contenteditable
来源: https://codeday.me/bug/20190704/1380817.html