The cursor disappear when pressing the right arrow key

Question

A content editable div has html elements like spans and simple text.

Fiddle link

.ing-tag_0{
color:white;
background-color: blue;
}

<div value="" id="step_input_0" name="step" placeholder="Tell us about step 1" class="input stepbox step_input" contenteditable="true">sdf dsaf asdf s <span data-class="method" class="ing-tag_0" contenteditable="false"> sdfcxz </span><span data-class="method" class="ing-tag_0" contenteditable="false"> sdfcxz </span><span data-class="method" class="ing-tag_0" contenteditable="false"> sdfcxz </span><span data-class="method" class="ing-tag_0" contenteditable="false"> sdfcxz </span><span data-class="method" class="ing-tag_0" contenteditable="false"> sdfcxz </span><span data-class="method" class="ing-tag_0" contenteditable="false"> sdfcxz </span><span data-class="method" class="ing-tag_0" contenteditable="false"> sdfcxz </span><span data-class="method" class="ing-tag_0" contenteditable="false"> sdfcxz </span><span data-class="method" class="ing-tag_0" contenteditable="false"> sdfcxz </span></div>

Move the cursor to the end of the div. On hitting left arrows key continuously from the end of the the cursor moves in between the spans continuously .This works fine.

Now move the cursor to the start of the div then try moving to the right side of div by hitting right arrows keys continuously then the cursor disappears at some point when it encounters the spans.

Where I wrong here.

Please suggest a way so If I press right arrow the cursor moves to end by passing thru the div.?

The span must not be content editable as these are fixed.

EDIT

I dont have any other option to change this. I already tried adding spaces of zero width.

1. This did not work on safari.
2. What if user deletes this spaces. Again the cursor would disappear.

Answer 1

Here is a solution that works:

$('.editable').on('keydown', function(event) {
    if (window.getSelection && event.which === 39) {
        var sel = window.getSelection();
        var nodes = sel.anchorNode.childNodes;
        var selection = sel.anchorOffset;
        var loops = 0;
        var i = selection;
        if (nodes.length > 0 || (nodes.length === 0 && sel.anchorNode.length === 
        selection && sel.anchorNode.nextSibling !== null)) {
            var r = document.createRange();
            if (nodes.length === 0 && sel.anchorNode.length === selection && 
            sel.anchorNode.nextSibling !== null) {
                r.setStartBefore(sel.anchorNode.nextSibling);
                r.setEndAfter(sel.anchorNode.nextSibling);
            } else {
                while (i < nodes.length) {
                    loops += 1;
                    if (nodes[i].nodeType !== 3) {
                        break;
                    }
                    i++;
                }
                r.setEnd(this, selection + loops);
                r.setStart(this, selection);
            }
            sel.removeAllRanges();
            sel.addRange(r);
            $(this).focus();
        }
    }
});

Example including backspace event