Moving caret in the contents of a read-only div allowing for dynamic highlighting

http://stackoverflow.com/questions/26913615/moving-caret-in-the-contents-of-a-read-only-div-allowing-for-dynamic-highlightin?noredirect=1#comment42376695_26913615

HTML

<!-- This now works -->
<div id="diff-content" style="outline-style:none" contentEditable>
    <b>Some Header Text</b>
    <br>
    <span>More text</span>
    <br>
    <a href='http://www.google.com' target='_blank'>A link</a>
</div>
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
<script>
    var _gaq = _gaq || [];
    _gaq.push(['_setAccount', 'UA-23915674-6']);
    _gaq.push(['_trackPageview']);

    (function() {
        var ga = document.createElement('script');
        ga.type = 'text/javascript';
        ga.async = true;
        ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
        var s = document.getElementsByTagName('script')[0];
        s.parentNode.insertBefore(ga, s);
    })();




    var headerUri = 'http://stackoverflow.com/q/8956567/918414',
        headerCaption = 'How do I make an editable DIV look like a text field?';
    document.body.insertAdjacentHTML(
        'afterBegin',
        '<a href="' + headerUri + '" ' + 'target="_top" ' + 'onmouseover="this.style.opacity=\'.95\'" ' + 'onmouseout="this.style.opacity=\'1\'" ' + 'style="' + 'background-color: black;' + 'background-image: linear-gradient( top, rgba( 255, 255, 255, .3), rgba( 255, 255, 255, 0) );' + 'background-image: -webkit-linear-gradient( top, rgba( 255, 255, 255, .3), rgba( 255, 255, 255, 0) );' + 'background-image: -moz-linear-gradient( top, rgba( 255, 255, 255, .3), rgba( 255, 255, 255, 0) );' + 'background-image: -o-linear-gradient( top, rgba( 255, 255, 255, .3), rgba( 255, 255, 255, 0) );' + 'background-image: -ms-linear-gradient( top, rgba( 255, 255, 255, .3), rgba( 255, 255, 255, 0) );' + 'border: 1px solid black;' + 'border-radius: 2px;' + 'color: white;' + 'display: block;' + 'font: normal 15px/26px Helvetica, Verdana, Tahoma;' + 'height: 26px;' +...

JavaScript

//This will make the editable div not actually editable.
//It will also allow the arrow keys and control hot keys to be used
$(this).keydown(function (event) {

    if (document.activeElement.id == 'diff-content') {
        if (!allowedKeys(event.keyCode)) {
            //The only other key presses that should be processed are ctrl+c (keycode 67) and ctrl+a (65)
            if (!event.ctrlKey || !(event.keyCode == 67 || event.keyCode == 65)) {
                event.preventDefault();
            }
        }
    }
});

function allowedKeys(iKeyCode) {

    if ((iKeyCode >= 35 && iKeyCode <= 40) || iKeyCode == 9) {
        //true indicates the keypress should be processed
        // 9 tab
        // 35 end
        // 36 home
        // 37-40 arrows
        return true;
    }

    return false;
}