Fake caret example.

Shows how to create a fake caret.

HTML

<p tabindex="0">foo bar blah blah one two three</p>

CSS

#caret {
    display: inline-block;
    /*border-style: solid;
    border-width: 1px; */
    max-width: 1px;
    min-height: 100%;
    background-color: black;
}

JavaScript

var caret_def = "<span id='caret'>&nbsp;</span>";
$(function () {
    $("p").prepend(caret_def);
    
    $("p").keydown(function (ev) {
        if (ev.which != 39 && ev.which != 37)
            return;
        
        ev.target.normalize();
        var $caret = $("#caret");
        var prev = $caret.get(0).previousSibling;
        var offset = 0;
        if (prev)
            offset = prev.nodeValue.length;
        $caret.remove();
        ev.target.normalize();
        var text_node = ev.target.childNodes[0];
        if (ev.which == 39) {
            // move right
            offset++;
            if (offset > text_node.nodeValue.length)
                offset = text_node.nodeValue.length;
            insertIntoText(text_node, offset, $(caret_def).get(0));
        }
        else if (ev.which == 37) {
            // move left
            offset--;
            if (offset < 0) offset = 0;
            insertIntoText(text_node, offset, $(caret_def).get(0));
        }
        return false;
    });
});

function insertIntoText(text_node, index, new_element) {
    var frag = document.createDocumentFragment();
    frag.appendChild(document.createTextNode(text_node.nodeValue.slice(0, index)));
    frag.appendChild(new_element);
    frag.appendChild(document.createTextNode(text_node.nodeValue.slice(index)));
    text_node.parentNode.replaceChild(frag, text_node);
}