Set cursor to the end of contenteditable div

Question

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

this is answered many times. take a look at this thread: http://stackoverflow.com/questions/1125292/how-to-move-cursor-to-end-of-contenteditable-entity/3866442#3866442 — hereandnow78, Nov 22 '12 at 13:09
http://jsfiddle.net/dvH5r/3/ plz find the fiddle here , am I doing something wrong. Have a look — Ross, Nov 22 '12 at 13:31

score 14 · Accepted Answer · answered Nov 22 '12 at 14:32

14

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/

answered Nov 22 '12 at 14:32

hereandnow78

14,094
8
42
48

Hello. In your demo in JSFiddle, why is it that I cannot add text to an empty div? It always points to a div before it. – Lynnell Neri Sep 14 '17 at 03:41

score 4 · Answer 2 · answered Nov 22 '12 at 16:04

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;
}

score 0 · Answer 3 · answered Nov 22 '12 at 13:11

0

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 });

answered Nov 22 '12 at 13:11

toxicate20

5,270
3
26
38

Thats cool, a plugin for it. This would be my last option if nothing else works. As I don't want to add to much code. – Ross Nov 22 '12 at 13:33
1

jCaret won't work for this. It is designed for text inputs and textareas, not contenteditable elements. – Tim Down Nov 22 '12 at 15:42

Set cursor to the end of contenteditable div

3 Answers3

Linked