Question

I have a table which I’ve added some multiple selection functionality where shift + click selects rows between the first click and second click but it ends up highlighting all text between the rows.

I don’t want to disable text selection via CSS because this stuff really does need to be selectable, just not when shift + clicking when my multi-select function fires.

Can this be done?

    var lastChecked;    
    $("#contact_table tr").click(function(e) {
        if (e.target.getAttribute('type') == 'checkbox') {
            return;
        };  
        if (e.shiftKey && lastChecked) {
            // select between last point and new point
            var tableRows = $("#contact_table tr");
            var newRow = tableRows.index($(this));
            var oldRow = tableRows.index(lastChecked);
            if (oldRow < newRow) {
                newRow = newRow +1;
            }
            var sliceRange = [newRow, oldRow].sort();
            var selectedRows = tableRows.slice(sliceRange[0], sliceRange[1])
                .find('input[type=checkbox]').attr('checked', true);
        } else {
            var checkbox = $(this).find('input[type=checkbox]');
            var checked = toggleCheckbox(checkbox);
            if (checked) {
                lastChecked = $(this);
            }               
        };
        recalculateSelectedButton();
    });

Answer 1

You can deselect all text with javascript; add a call to RemoveSelection() after you run the multi-select logic.

From http://help.dottoro.com/ljigixkc.php via Clear a selection in Firefox

function RemoveSelection () {
    if (window.getSelection) {  // all browsers, except IE before version 9
        var selection = window.getSelection ();                                        
        selection.removeAllRanges ();
    }
    else {
        if (document.selection.createRange) {        // Internet Explorer
            var range = document.selection.createRange ();
            document.selection.empty ();
        }
    }
}