I am trying to set the cursor to the end of next/prev contenteditable tag if the current one is empty, but when I set focus it adds focus to the begining of the text and not end Tried almost all solution on SO but none seemed to work for me. Here the simple code I am trying

HTML CODE

<div id = 'main'>
<div id = 'n1' contenteditable=true> Content one</div>
<div id = 'n2' contenteditable=true> Content 2</div>
<div id = 'n3' contenteditable=true> Content 3</div>
<div id = 'n4' contenteditable=true> Content 4</div>

JS CODE

$('#main div').keydown(function(){
if(!$(this).text().trim()){
    $(this).prev().focus();
   //setCursorToEnd(this.prev())
    }
});


function setCursorToEnd(ele)
  {
    var range = document.createRange();
    var sel = window.getSelection();
    range.setStart(ele, 1);
    range.collapse(true);
    sel.removeAllRanges();
    sel.addRange(range);
    ele.focus();
  }

I am trying to set the cursor to the end of next/prev contenteditable tag if the current one is empty, but when I set focus it adds focus to the begining of the text and not end Tried almost all solution on SO but none seemed to work for me. Here the simple code I am trying

HTML CODE

<div id = 'main'>
<div id = 'n1' contenteditable=true> Content one</div>
<div id = 'n2' contenteditable=true> Content 2</div>
<div id = 'n3' contenteditable=true> Content 3</div>
<div id = 'n4' contenteditable=true> Content 4</div>

JS CODE

$('#main div').keydown(function(){
if(!$(this).text().trim()){
    $(this).prev().focus();
   //setCursorToEnd(this.prev())
    }
});


function setCursorToEnd(ele)
  {
    var range = document.createRange();
    var sel = window.getSelection();
    range.setStart(ele, 1);
    range.collapse(true);
    sel.removeAllRanges();
    sel.addRange(range);
    ele.focus();
  }

• javascript
• jquery
• html
• contenteditable

• this is answered many times. take a look at this thread: stackoverflow.com/questions/1125292/… – hereandnow78 Commented Nov 22, 2012 at 13:09
• jsfiddle.net/dvH5r/3 plz find the fiddle here , am I doing something wrong. Have a look – Ross Commented Nov 22, 2012 at 13:31

3 Answers 3

you are using jQuery and getting the element from jQuery. You must convert it into a native DOM element (via the jQuery-get Function) to use the "setCurserToEnd"-Function:

your method-call:

setCursorToEnd(this.prev());

working solution:

setCursorToEnd($(this).prev().get(0));

see the updated fiddle: http://jsfiddle.net/dvH5r/4/

You were pretty close, the only problem is that prev() returns a jQuery object, whereas you want to pass the actual DOM element to setCursorToEnd()

Finished product: http://jsfiddle.net/B5GuC/

*Note: this works even if the above div element is empty. Vanilla js ftw.

$('#main div').keydown(function(){
    if(!$(this).text().trim()){
        $(this).prev().focus();
        setCursorToEnd(getPrevSib(this));
    }
});

function setCursorToEnd(ele){
    var range = document.createRange();
    var sel = window.getSelection();
    range.setStart(ele, 1);
    range.collapse(true);
    sel.removeAllRanges();
    sel.addRange(range);
}

function getPrevSib(n){
    //gets prev sibling excl whitespace || text nodes
    var x=n.previousSibling;
    while (x && x.nodeType!=1){
          x=x.previousSibling;
    }
    return x;
}

Its advisable that you use the plugi jCaret as browsers are widely different in doing this. For example you can retrieve your current position in the field with

$("#myTextInput").bind("keydown keypress mousemove", function() {
  alert("Current position: " + $(this).caret().start);
});

You could then set the position by using (not tested it though)

var endPos = $(this).caret().end;
$("input:text.hola").caret({start:endPos ,end:endPos });