Geek asks and answers

Move cursor to next contentEditable - jQuery

what I want to do is specifically when I press the enter button, it creates a new paragraph, the cursor then moves or selects a new editing item, editable to start typing, but I cannot find a way to do this.

/*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();}

Does anyone have an understanding? would be highly appreciated.

I know that this is possible with an input field and .focus (), but this will not work on contentEditable, it should be a way to do this.

Regards Patrick

+3
source share
1 answer

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/

+1

More articles:


All Articles