Vfrdtyky

I am moving between contenteditable divs with the arrow keys, and I'm using the cursor position value (window.getSelection().anchorOffset) to tell the position value of the cursor and know when I've reached the start or end of a div. As I move to the left (LEFT ARROW while the cursor is in position 0), I want the cursor to move to the right end of the previous div. I found Tim Down's answer, which does indeed allow me to move the cursor to the previous div. Then using the extra comment from Tim, I was able to place the cursor on the right edge of the previous div. However, I find that the cursor position value reported does not match the actual cursor position (in Chrome).

In response to a duplicate of the question, Mr_Green posted a fiddle, which I've modified to show the issue.

var result = $('#result');



$('#result').keydown(function(e) {

    curposondown = window.getSelection().anchorOffset;

    console.log(`cursorposondown: ${curposondown}`);

});

$('#result').keyup(function(e) {

    console.log(e);

    var element = e.currentTarget;

    var key = e.which;

    var text = element.textContent;

    var pos = window.getSelection().anchorOffset;

    console.log(`text: ${text}`);

    console.log(`text length: ${text.length}`);

    console.log(`char: ${e.which}`);

    console.log(`cursor: ${pos}`);

});



$('.click').click(function () {

    var preHtml = result.html();

    result.html(preHtml + "hello");



    result.focus();

    placeCaretAtEnd( document.getElementById("result") );

});



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

    }

}

After typing in a few letters, while observing the console (Developer Tools), use the LEFT & RIGHT ARROW keys to move between the letters and see what is output for each keydown/keyup. Note that the cursor position shows the position before the cursor is moved on the keydown, and then after it's moved on keyup. (This is why I added the keydown hook, to differentiate between the first time the cursor moved to 0, which should not move to the previous div, and the time it is already at 0, when it should.) Pay particular attention to what position values are reported at the right end of the text, when you press the RIGHT ARROW.

Now press the "click to add text" button to append the "hello" string, and let the code move the cursor to the right side of the text. Then press the RIGHT ARROW and note that the cursor position says the cursor is at position 1 (on key down and up).

This means I can't detect that the cursor is at the right side of the text, at this point. (So the cursor cannot immediately be moved back to the next div, as it normally would if it were in that position.) After the user uses the LEFT ARROW key to move one character left, then moves back with the RIGHT ARROW key, the cursor position corrects itself.

So, the question is, is there a way to ensure that the cursor position value is updated to match the actual cursor position? Or is there something else I'm doing here that is inadvisable?