Testing Caret Position

Comparing the reported caret position in IE versus a Gecko-based browser.

by FishBasketGordo

HTML

<textarea id="txt" rows="20" cols="30"></textarea><br/>
<span id="txtStats"></span><br/>

JavaScript

function getCaretPosGecko(txtbox) {
    return txtbox.selectionStart;
}

function getCaretPosIE(txtbox) {
    var range, rangeCopy;

    txtbox.focus();
    range = document.selection.createRange();

    if (range !== null) {
        rangeCopy = range.duplicate();
        rangeCopy.moveToElementText(txtbox);
        rangeCopy.setEndPoint('EndToStart', range);

        return rangeCopy.text.length - range.text.length;
    } else {
        return -1;
    }
}

function getCaretPos(txtbox) {
    if (txtbox.selectionStart != undefined) {
        return getCaretPosGecko(txtbox);
    } else if (document.selection) {
        return getCaretPosIE(txtbox);
    }
}

$('#txt').keyup(function(event) {
    var text = $(this).val(),
        caret = getCaretPos(this);

    $('#txtStats').text('length = ' + text.length + ', caret = ' + caret);
});