Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

disable text selection while pressing 'shift'

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 selected) and then shift-click on another item to select all the items in between. this basically works OK, however the shift-click also selects (higtlights) the text that appears inside the items (the basic browser functionality for shift clicks). is there any way to disable this?

like image 534
Asaf David Avatar asked Oct 06 '09 19:10

Asaf David


People also ask

How do I turn off text selection?

You can use the user-select property to disable text selection of an element. In web browsers, if you double-click on some text it will be selected/highlighted. This property can be used to prevent this.

How can I prevent text element selection with cursor drag?

You'll need to call event. preventDefault() in both the down and move events in order to keep the browser from selecting text. Save this answer.

How do I turn off text selection in react?

To disable the text selection highlighting in React, we can set the css property user-select to a value “none”. In the example above, we have added the browser prefixes for the user-select property, so it works the same in all browsers.


1 Answers

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) */ } 
like image 192
Roatin Marth Avatar answered Sep 22 '22 11:09

Roatin Marth