Javascript 将光标移动到下一个contentEditable-JQuery
我特别想做的是,当我按enter键时,它会创建一个新段落,然后光标会移动到或选择新的内容可编辑段落开始键入,但我似乎找不到这样做的方法Javascript 将光标移动到下一个contentEditable-JQuery,javascript,jquery,html,text-editor,contenteditable,Javascript,Jquery,Html,Text Editor,Contenteditable,我特别想做的是,当我按enter键时,它会创建一个新段落,然后光标会移动到或选择新的内容可编辑段落开始键入,但我似乎找不到这样做的方法 /*HTML Layout*/ <div id="wrap" contenteditable="true"> || <----cursor posiiton //*New paragraph content editable when enter is pressed <p contenteditable="true">New Pa
/*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();}
/*HTML布局*/
||禁用父级contenteditable
,将焦点设置为新建contenteditable
,启用父级contenteditable
,并将焦点放回父级contenteditable
(在某些浏览器中不允许您移动到当前内容之外)
$(窗口).keydown(函数(事件){
if(event.which==13){
event.preventDefault();
var p=$(“”).text(“插入新段落”).attr('contenteditable','true')。appendTo($('wrap'));
$('#wrap').attr('contenteditable','false');
$(p.focus();
$('#wrap').attr('contenteditable','true').focus();
}
});
示例:下次请包括完整的代码,也就是事件处理程序,或者直接给JSFIDLE或其他东西一个副本,这样我们就可以直接尝试使用它了。但是为什么要在contenteditable
项中包含一个contenteditable
项呢?我将把它放到JSFIDLE上。我这样做是为了防止点击空白处可编辑的内容,但我想在空白处添加一个点击事件来添加一个新的可编辑内容也会起同样的作用!我也为自己找到了答案:很高兴你也找到了解决办法。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();
}
});