Question

How can I collapse selected text in a contentEditable div to the start of the selection , not the entire div?

Answer 1

For all major browsers except IE <= 8, you can use the collapseToStart() method of the selection to collapse to the earliest point of the selection in document order, regardless of the direction of the selection:

window.getSelection().collapseToStart();

In IE <= 8, use the following, which is the equivalent of the first example above:

var sel = document.selection;
if (sel.type == "Text") {
    var range = sel.createRange();
    range.collapse(true);
    range.select();
}

Finally, putting these together to make a cross-browser function:

function collapseSelectionToStart() {
    var sel, range;
    if (window.getSelection) {
        window.getSelection().collapseToStart();
    } else if ( (sel = document.selection) && sel.type == "Text") {
        range = sel.createRange();
        range.collapse(true);
        range.select();
    }
}

Live demo: http://jsfiddle.net/yQS9G/2/