2

On our whiteboard application, Chrome users are able to highlight the entire canvas if they drag their mouse a certain way:

Any ideas on how to prevent this from happening? Thanks!

Théophile
  • 1,032
  • 10
  • 16
Donny
  • 955
  • 3
  • 14
  • 19

2 Answers2

6

Applying this CSS to the body seems to do the trick for me in Chrome:

-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
-o-user-select: none;
user-select: none;

Others have said that these properties are not yet respected by Opera and IE, and instead, you need to set the unselectable attribute on the elements, like so:

<body unselectable="on">

I don't have either of those browsers, so I can't confirm this, but you can see these posts for more detail:

How to disable text selection highlighting using CSS?

Is there a way to make text unselectable on an HTML page?

Community
  • 1
  • 1
Chad von Nau
  • 4,316
  • 1
  • 23
  • 34
  • 1
    I've just added this to an app I'm working on (All current browser revs as per 22nd July 2016) I can confirm that the css in the first chunk of code works in IE11, Firefox, Opera, Chrome and Maxathon in a consistent manner. I have however, just checked the whatwg & css wg specs, and the "user-select" css is still in working draft, and has been since September 2015. Can I use however, reports it as fully implemented in all browsers except for opera-mini. – shawty Jul 22 '16 at 11:09
1

Apply this CSS to the CANVAS element, If you apply this css to body, than your text and etc selection will be disabled, so be careful.

  canvas{
     -webkit-touch-callout: none;
     -webkit-user-select: none;
     -khtml-user-select: none;
     -moz-user-select: none;
     -ms-user-select: none;
     -o-user-select: none;
     user-select: none;
  }
gregos919
  • 47
  • 1
  • 7