Set Cursor position after nested contentEditable

Question

I've got this markup

<div contentEditable="true">
    Some other editable content
    <div class="field" contentEditable="false">
        <span class="label">This is the label</span>
        <span class="value" contentEditable="true">This is where the caret is</span>
    </div>
    <!-- This is where I want the Caret -->
</div>

The caret is currently in the .field span.

I need to move it back out after the .field in the parent contentEditable.

Example

How can this be accomplished via javascript (with the use of jQuery if needed) ?

It will be trying to trigger it on a keydown event when the caret is in the .value span as shown.

@ExplosionPills Whenever I want, via javascript... It will most likely end up on a `keydown` event when the caret is in the `.value` span. — jondavidjohn, Jan 22 '13 at 16:42
I'm not sure that it's possible unless you have a non-empty node after the `.field` div — Explosion Pills, Jan 22 '13 at 16:46
@ExplosionPills So couldn't I insert a non-empty div after the one that currently has focus, and then move it? — jondavidjohn, Jan 22 '13 at 16:53
Yeah that should work fine, I just wasn't sure whether you wanted to do that. Is your question more about how to move the cursor with JS? — Explosion Pills, Jan 22 '13 at 16:58

score 3 · Answer 1 · edited May 23 '17 at 12:07

I am assuming that you want to go to this next section. To make it clear, I added a text "Here!" in a demo to show you that it does goes to the end.

In the below demo, press Enter key from the .field .value to go to the end.

DEMO: http://jsfiddle.net/GLzKy/1/

Below is the function from https://stackoverflow.com/a/4238971/297641 which actually does all the work.

$('.field .value').keydown(function (e) {
    if (e.which == 13) { //Enter Key
        e.preventDefault();            
        placeCaretAtEnd($(this).closest('.parent')[0]);
    }
});

/**
  This below function is from https://stackoverflow.com/a/4238971/297641
  All credits goes to the original author.
*/
function placeCaretAtEnd(el) {
    el.focus();
    if (typeof window.getSelection != "undefined"
            && typeof document.createRange != "undefined") {
        var range = document.createRange();
        range.selectNodeContents(el);
        range.collapse(false);
        var sel = window.getSelection();
        sel.removeAllRanges();
        sel.addRange(range);
    } else if (typeof document.body.createTextRange != "undefined") {
        var textRange = document.body.createTextRange();
        textRange.moveToElementText(el);
        textRange.collapse(false);
        textRange.select();
    }
}

Tested in FF, IE8 and Chrome

Reference: https://stackoverflow.com/a/4238971/297641

Close, but my modifications should explain the problem with this solution ... http://jsfiddle.net/GLzKy/3/ ... I needs to go to the next section immediately after the element with focus, not at the very end of the parent. — jondavidjohn, Jan 24 '13 at 23:29
http://jsfiddle.net/farrukhsubhani/GLzKy/6/ added an alert to test and it seems to go to right place but if you remove alert then it does not. Something to play with at least if not final solution. — Farrukh Subhani, Jan 29 '13 at 06:02

score 3 · Accepted Answer · edited Jan 29 '13 at 16:57

3

An update to the previous answer. http://jsfiddle.net/GLzKy/4/

placeCaretAtEnd($(this).parent().nextAll('.field').children('value'));

UPDATE

Updated answer with correct answer in comments

For moving directly after the current field, you might want to use range.setStartAfter and range.setEndAfter: http://jsfiddle.net/GLzKy/5

edited Jan 29 '13 at 16:57

jondavidjohn

61,812
21
118
158

answered Jan 25 '13 at 23:54

Edmund Moshammer

688
7
19

Not quite what I'm after, if you read the comments in the HTML you'll see what I'm after. Not to jump to the next field, but to move it directly after the current field. – jondavidjohn Jan 28 '13 at 20:09
2

For moving directly after the current field, you might want to use range.setStartAfter and range.setEndAfter: http://jsfiddle.net/GLzKy/5/ – Edmund Moshammer Jan 29 '13 at 02:59

Set Cursor position after nested contentEditable

2 Answers2

Linked