18

Doesn't oEvent.preventDefault(); work in GC? I need to prevent selecting text when the onmove event is triggered.

EDIT: It turns out to be very easy...

function disableSelection() {
   document.onselectstart = function() {return false;} // ie
   document.onmousedown = function() {return false;} // others
}
function enableSelection() {
   document.onselectstart = null; // ie
   document.onmousedown = null; // others
}

After that, there's no text selection triggered on the move event (ie. on the select event -- ie - indeed ie!)

Frank Furd
  • 541
  • 2
  • 4
  • 11
  • In my opinion it is better to do it via this method (or `event.preventDefault()` which is equivalent but a bit more modern) than to try to suppress the selection through CSS attributes which differ between browser and aren't that predictable. – Jim Blackler Nov 25 '12 at 13:06

2 Answers2

45

-webkit-user-select: none CSS style controls whether the user is allowed to select the
text of the element.

For completeness sake, this covers all supporting browsers (IE is not considered a web browser):

.no-select
{
   user-select: none;
   -o-user-select:none;
   -moz-user-select: none;
   -khtml-user-select: none;
   -webkit-user-select: none;
}

To do it through Javascript, just create a class and add the node's attributes.

LiraNuna
  • 64,916
  • 15
  • 117
  • 140
  • 9
    IE is not considered a web browser? How's that? – Frank Furd Feb 06 '10 at 08:57
  • 7
    Search in stackoverflow's question database, see how many 'Works on firefox, doesn't work on IE' questions you can find :) – LiraNuna Feb 06 '10 at 09:04
  • You could add -o-user-select:none to the list for Opera support – Sandra Jun 09 '10 at 12:57
  • what browsers does `user-select: none;` work for, since it doesn't work on Chrome or Firefox. – cantsay May 09 '14 at 17:40
  • 7
    +1 for the answer, +1 for the IE bashing. Bah, we can only give a single +1 :) Bashing IE is always `Time.now` as long as it's available. – Halil Özgür Jul 26 '14 at 15:27
  • 2
    For those who work in places that do need IE, IE10 added support for this using `-ms-user-select` – LiraNuna Jul 29 '14 at 19:00
  • I love how easy it is to find these in Stackoverflow. Then it's the just the matter of hitting Ctrl-Shift-I to bring Chrome developer tools, search and delete the pointless attributes above in the page and tada: text selection is back. – MarcH Apr 29 '18 at 00:40
  • @MarkH Well yes, but I don't think anyone's trying to claim that it's a foolproof way to stop a user getting the content if they want to. There are other use cases, many of which are aesthetic. – Dan May 10 '18 at 10:16
19

To do it using JavaScript:

var el = document.getElementById("myElement"), s = el.style;
s.userSelect = "none";
s.webkitUserSelect = "none";
s.MozUserSelect = "none";
el.setAttribute("unselectable", "on"); // For IE and Opera

Note that for IE and Opera, the unselectable attribute isn't inherited by an element's children, so any child elements of el will also need unselectable to be set to "on".

Tim Down
  • 318,141
  • 75
  • 454
  • 536