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);

Did you not read my statement above when I explicitly lay out why this is not a duplicate? — Adam McCormick
– Adam McCormick, Commented Sep 5, 2013 at 20:26
stackoverflow.com/a/54101500/2708249 Check out my answer here. — Rubanraj Ravichandran
– Rubanraj Ravichandran, Commented Jan 9, 2019 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
– Adam McCormick, Commented Jan 9, 2019 at 18:43

Diomedes Andreou · Accepted Answer · 2013-09-05 21:10:06Z

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 5, 2013 at 21:10

answered Sep 5, 2013 at 20:45

Diomedes Andreou

3851 silver badge6 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Diomedes Andreou Over a year ago

e = e || window.event; var keynum = e.keyCode || e.which; Fallback for keycode

Adam McCormick Over a year ago

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?

Diomedes Andreou Over a year ago

Personally i would declare a class e.g. unselectable with aforementioned css rules and simple remove that class on keyup.

Adam McCormick Over a year ago

A small modification on this code handled my issue, updating question with final code

Michael Petito · Accepted Answer · 2015-01-08 04:26:44Z

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 8, 2015 at 4:26

Michael Petito

13.2k4 gold badges44 silver badges55 bronze badges

3 Comments

Adam McCormick Over a year ago

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.

Michael Petito Over a year ago

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.

Moritz Schmidt Over a year ago

Exactly what I needed

Collectives™ on Stack Overflow

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

2 Answers 2

4 Comments

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related