How to disable selection of text on a web page

Question

I am trying to make webpage very native. How to remove select,select all property in webpage?

You got so far three extremely different answers: maybe you should specify better what "native" exactly means to you and what you want to remove — Fabrizio Calderan, Sep 07 '12 at 09:42
What you are trying to do is prevent the user from selecting text with dragging the mouse and copy it or using CTRL+A (Windows) to select everything and copy it, right? — Henrik Ammer, Sep 07 '12 at 09:42
ya, correct. prevent the user from selecting the whole webpage, not only text, everything in webpage — selva_pollachi, Sep 07 '12 at 09:46
@Pavlo This not a duplicate of that. That is about removing the highlight, this about removing the possibility to copy anything from the webpage. So it is a duplicate, but of this one http://stackoverflow.com/questions/9958478/how-to-disable-copy-paste-browser — Henrik Ammer, Sep 07 '12 at 09:54
@selva And on that question, check the following answer by [Christoph](http://stackoverflow.com/users/1047823/christoph), http://stackoverflow.com/questions/9958478/how-to-disable-copy-paste-browser#comment12718729_9958478 — Henrik Ammer, Sep 07 '12 at 09:55
@HenrikAmmer we are designing offline site. we need to give some restrictions.So we need to prevent the user from selecting properties.anyway thanx dude. — selva_pollachi, Sep 07 '12 at 10:04
@pavlo property is a function. for example visibility property,display property, selecting etc.. am i right? — selva_pollachi, Sep 07 '12 at 10:16
@selva Yes, `visibility`, `display`, `user-select` are CSS properties. But you can't „select“ them, you can only set them with what's called CSS declaration. Check my answer. — Pavlo, Sep 07 '12 at 10:25

Pavlo · Accepted Answer · 2014-12-22T13:28:15.540

100

Disable selection of every element with CSS

body {
  -webkit-user-select: none;
     -moz-user-select: -moz-none;
      -ms-user-select: none;
          user-select: none;
}

This is supported by Chrome, Safari, Firefox, IE 10, and iOS Devices. More info on MDN page.

Edit: If you want <input> and <textarea> to remain selectable in Firefox, add:

input,
textarea {
     -moz-user-select: text;
}

Disable context menu with jQuery

$(document).on("contextmenu", function (event) { event.preventDefault(); });

edited Dec 22 '14 at 13:28

answered Sep 07 '12 at 09:55

Pavlo

43,301
14
77
113

Saves my day. I did not know this can be so simple in CSS. I tried whole day using javascript and found this. – vikash.gupta Dec 31 '18 at 10:52

score 8 · Answer 2 · edited Jun 13 '19 at 11:53

8

use this code https://www.docsity.com/it/teorie-e-pratiche-del-web-4/556038/

body, html{     
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;  
}

edited Jun 13 '19 at 11:53

Community

1
1

answered Sep 12 '14 at 06:41

Behnam

6,244
1
39
36

1

Nice. I used this, but without the `body` tag. Is there any reason for having the `body` tag when it's already being applied to the entire html? – Pamela Jan 16 '16 at 03:13

score 2 · Answer 3 · edited Feb 27 '13 at 16:33

This JavaScript will Disable select, copy and paste of the content But if user will save page to local machine they will be able to do "anything" they want with your code.

//disable cut copy past
var message = "";
function clickIE() { if (document.all) { (message); return false; } }
function clickNS(e) {
    if(document.layers || (document.getElementById && !document.all)) {
        if (e.which == 2 || e.which == 3) { (message); return false; }
    }
}
if (document.layers)
{ document.captureEvents(Event.MOUSEDOWN); document.onmousedown = clickNS; }
else { document.onmouseup = clickNS; document.oncontextmenu = clickIE; }
 document.oncontextmenu = new Function("return false")


//for disable select option
document.onselectstart = new Function('return false');
function dMDown(e) { return false; }
function dOClick() { return true; }
document.onmousedown = dMDown;
document.onclick = dOClick;

score 1 · Answer 4 · answered Sep 07 '12 at 09:38

1

You Can disable by adding attribute in your body tag oncontextmenu="return false;

<body oncontextmenu="return false;">

answered Sep 07 '12 at 09:38

Manish Prajapati

575
2
9

4

[Obstructive JavaScript](http://stackoverflow.com/questions/5871640/why-is-using-onclick-in-html-a-bad-practice) is considered to be a bad practice. – Pavlo Sep 07 '12 at 11:38

score -1 · Answer 5 · answered Sep 07 '12 at 09:42

-1

may this help you

<div onselectstart="return false;" style="-moz-user-select: none;">

answered Sep 07 '12 at 09:42

Prashobh

9,216
15
61
91

A good start but doesn't prevent select all (CTRL+A in Windows) in my test though. – Henrik Ammer Sep 07 '12 at 09:44

score -1 · Answer 6 · answered May 29 '17 at 08:04

-1

element_name{
  -webkit-touch-callout: none; 
  -webkit-user-select: none;
  -khtml-user-select: none; 
  -moz-user-select: none;
  -ms-user-select: none; 
   user-select: none;
 }

answered May 29 '17 at 08:04

Satya Pendem

307
5
13

While this code may answer the question, providing additional context regarding how and/or why it solves the problem would improve the answer's long-term value. – Badacadabra May 29 '17 at 13:35

How to disable selection of text on a web page

6 Answers6

Disable selection of every element with CSS

Disable context menu with jQuery

Linked