Caret position

by dsbonev

HTML

<div id="info">
    Click the text content to edit
</div>
<div id="content" contentEditable="true">text text text text text text text text 
</div>

CSS

#content {
    width: 60px;  
    background: #F0F0F0;    
}

JavaScript

var contentNode = document.querySelector('#content'),
    infoNode = document.querySelector('#info'),
    showInfo = function (info) {
        infoNode.innerHTML = info;
    };

if (!infoNode) {
    document.body.innerHTML = 'Missing info node';
    return;
}

if (!contentNode) {
    showInfo('Missing content node');
    return;
}

function showCaretPosition() {
    var startPos = window.getSelection().getRangeAt(0).startOffset;
    showInfo('Caret at position ' + startPos);
}

contentNode.addEventListener('click', showCaretPosition, false);

contentNode.addEventListener('keyup', showCaretPosition, false);