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

时间:2011-06-04 12:57:05

标签: javascript jquery html5 text-editor contenteditable

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

/*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不起作用必须有一种方法。

最诚挚的问候Patrick

1 个答案:

答案 0 :(得分:2)

禁用父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(); } }); 之外在某些浏览器中是当前的。)。

{{1}}

示例:http://jsfiddle.net/niklasvh/6AsHq/