How can I disable text selection using shift without disabling all text selection?

Question

So I know this sounds like a duplicate, but it isn't (or if it is, the accepted answer on all the ones I can find doesn't work the way I need it to). The issue is this:

I'm writing in HTML5 using jQuery, I need to make a grid allow multi-select with control and shift. I have that logic working, but whenever you shift-click it selects the text in the grid. I want to prevent this selection, but here's the critical difference between this and the other questions I found: I want selection of text to work at all other times.

To restate: I want to disable text selection using shift WITHOUT disabling all text selection for the elements specified. Does anyone know how I can do that?

-- EDIT --
The following (in the constructor for the grid) solved this for me. As the answerer suggested, I declared a class for unselectability.

this.gridBody = $("#userGrid");
var handleKeydown = function(e)
{
  e = e || window.event;
  var keyPressed = e.keyCode || e.which;
  if (keyPressed == keys.shift) {
    e.data.gridBody.addClass("unselectable");
  }
};
var handleKeyup = function(e)
{
  e = e || window.event;
  var keyPressed = e.keyCode || e.which;
  if (keyPressed == keys.shift) {
    e.data.gridBody.removeClass("unselectable");
  }
};

$(document).on('keydown', this, handleKeydown);
$(document).on('keyup', this, handleKeyup);

possible duplicate [here](http://stackoverflow.com/questions/2700000/how-to-disable-text-selection-using-jquery) — Diomedes Andreou, Sep 05 '13 at 20:24
Did you not read my statement above when I explicitly lay out why this is not a duplicate? — Adam McCormick, Sep 05 '13 at 20:26
https://stackoverflow.com/a/54101500/2708249 Check out my answer here. — Rubanraj Ravichandran, Jan 09 '19 at 10:38
@RubanrajRavichandran That's a very succinct answer, but you are disabling selection for all elements on shift where I was interested in disabling selection for specific elements. — Adam McCormick, Jan 09 '19 at 18:43

Diomedes Andreou · Accepted Answer · 2013-09-05T21:10:06.707

7

That will bind on document an event where it disables text selection upon pressing DOWN shift

 document.onkeydown = function(e) {
  var keyPressed = e.keyCode;
  if (keyPressed == 16) { //thats the keycode for shift

    $('html').css({'-moz-user-select':'-moz-none',
       '-moz-user-select':'none',
       '-o-user-select':'none',
       '-khtml-user-select':'none',
       '-webkit-user-select':'none',
       '-ms-user-select':'none',
       'user-select':'none'
    }); //or you could pass these css rules into a class and add that class to html instead

    document.onkeyup = function() {
      //here you remove css rules that disable text selection
    }
  }
}

Hopefully i have helped you.

Based on comments

document.onkeydown = function(e) {
  var keyPressed = e.keyCode;
  if (keyPressed == 16) { //thats the keycode for shift

    $('html').addClass('unselectable'); //unselectable contains aforementioned css rules

    document.onkeyup = function() {
       $('html').removeClass('unselectable'); //and simply remove unselectable class making text selection availabe
    }
  }
}

edited Sep 05 '13 at 21:10

answered Sep 05 '13 at 20:45

Diomedes Andreou

385
1
6

e = e || window.event; var keynum = e.keyCode || e.which; Fallback for keycode – Diomedes Andreou Sep 05 '13 at 20:46
That's at least closer, can you elaborate on how you would "remove css rules that disable text selection" as you state without clearing all the CSS? – Adam McCormick Sep 05 '13 at 21:06
Personally i would declare a class e.g. unselectable with aforementioned css rules and simple remove that class on keyup. – Diomedes Andreou Sep 05 '13 at 21:07
A small modification on this code handled my issue, updating question with final code – Adam McCormick Sep 05 '13 at 21:18

score 4 · Answer 2 · answered Jan 08 '15 at 04:26

4

Another solution you might consider: instead of preventing text selection by watching for shift keys and toggling selectability, you could just clear the text selection.

window.getSelection().removeAllRanges();

I find this more convenient because it can be run in your click handler to "cancel" the default behavior. Appears to work in IE 9+ and other modern browsers.

answered Jan 08 '15 at 04:26

Michael Petito

12,891
4
40
54

Again, that's not useful in my case as I am explicitly NOT trying to disable text selection (indeed it's a required use case), but text selection when holding the shift key. Undoing the selection leads to a flash of selection and removes the ability to select text in the grid. – Adam McCormick Jan 08 '15 at 08:03
Yes, I understand your use-case and I used this to accomplish the same. You remove the selection in the click handler after checking `event.shiftKey`. – Michael Petito Jan 08 '15 at 13:29
Exactly what I needed – Moritz Schmidt Apr 27 '22 at 09:00

How can I disable text selection using shift without disabling all text selection?

2 Answers2

Linked

Related