disable text selection while pressing 'shift'

Question

I\'m implementing item selection functionality in javascript (using jQuery). item is a li that contains some html.
the user can click on one item (makes it select

Answer 1

I have an application like that. Trick is, I wanted to allow selection, but I also wanted Ctrl-click and Shift-click for selecting items.

What I found was that everyone but IE allows you to beat this by canceling the mousedown event, and in IE what works best is to temporarily disable onselectstart:

$("#id").mousedown(function (e) {
    if (e.ctrlKey || e.shiftKey) {
        // For non-IE browsers
        e.preventDefault();

        // For IE
        if ($.browser.msie) {
            this.onselectstart = function () { return false; };
            var me = this;  // capture in a closure
            window.setTimeout(function () { me.onselectstart = null; }, 0);
        }
    }
});

Answer 2

Try this after the Shift + click...

document.getSelection().removeAllRanges();

If that is not effective enough, you might have to also cancel the onselectstart event...

window.onload = function() {
  document.onselectstart = function() {
    return false;
  }
}

Answer 3

Try a combo of JavaScript and css to prevent the selection in the first place:

$('li').attr('unselectable', 'on'); // IE

css (for browsers not IE):

li {
            user-select: none; /* CSS3 (little to no support) */
        -ms-user-select: none; /* IE 10+ */
       -moz-user-select: none; /* Gecko (Firefox) */
    -webkit-user-select: none; /* Webkit (Safari, Chrome) */
}

Answer 4

This code will stop text selection only during the "shift" key pressed, if you release it then you can select text as usual. Currently I'm using this es6 code.

["keyup","keydown"].forEach((event) => {
    window.addEventListener(event, (e) => {
        document.onselectstart = function() {
            return !(e.key == "Shift" && e.shiftKey);
        }
    });
});

Answer 5

If you have checkboxes in your table rows (items), you can simply set focus to the checkbox for the row once you've made the selection. Focusing on the checkbox should get rid of the browser selection. You can also focus on a textbox or other form element. For JQuery,

$('tr').bind('click', function(e) {
  // If shift key was down when the row was clicked
  if (e.shiftKey) { 
    // Make the row selected
    $(this).parent().children().slice($(last).index(), $(this).index()+1).addClass('selected').find('input:checkbox').attr('checked', true);

    // Now focus on the checkbox within the row
    $('input:checkbox', $(this)).focus();
  }
});