Get caret position in DIV

Selection Range object test

HTML

<div id="test"><div id="test1" contenteditable="false">Non-editable text. <i>Editable</i> is below:</div><div id="test2" contenteditable="true">Hello, some <b>bold</b> and <i>italic and <b>bold</b></i> text</div></div>
<div id="caretPos"></div>

JavaScript

function getCaretCharacterOffsetWithin(element) {
    var caretOffset = 0;
    var doc = element.ownerDocument; // http://jsfiddle.net/jlanus/3dx3p6d8/#
    var win = doc.defaultView;
    var sel;
    if (typeof win.getSelection === "function") {
        sel = win.getSelection();
        debugger;
        if (sel.rangeCount > 0) {
            var range = win.getSelection().getRangeAt(0);
            var preCaretRange = range.cloneRange();
            preCaretRange.selectNodeContents(element);
            preCaretRange.setEnd(range.endContainer, range.endOffset);
            caretOffset = preCaretRange.toString().length;
        }
    } 
    return caretOffset;
}

function showCaretPos(event) {
    var el = document.getElementById("test"); // event.target; // document.getElementById("test");
    var caretPosEl = document.getElementById("caretPos");
    caretPosEl.innerHTML = "<br>Caret position: " + getCaretCharacterOffsetWithin(el) + ' ' 
    + window.getComputedStyle(el, null).display + ' ' + el.tagName + (!!el.id ? ('#' + el.id) : '') + '<br>'
    + '<code>' + el.ownerDocument.defaultView.getSelection().toString() + '</code>';
}

var testDiv = document.getElementById('test');
testDiv.onkeyup = showCaretPos;
testDiv.onmouseup = showCaretPos;