javascript: Disable Text Select

Question

I'm using javascript to disable text selection on my webiste.

The code is:

<script type="text/JavaScript">

function disableselect(e) {
  return false
}

function reEnable() {
  return true
}

document.onselectstart = new Function ("return false")

if (window.sidebar) {
  document.onmousedown = disableselect
  document.onclick = reEnable
}
</script>

Similar script can be found here

On my localhost: All Browsers (Firefox, Chrome, IE and Safari) work great.

On my Live site: All ok EXCEPT Firefox.

My questions are:

Does anyone have a suggestion as to why Firefox behaves differently for the live site and local host. Note: Javascript is enabled.
Maybe my script is too simplistic so I've tried the following with EXACTLY SAME Results

Let me suggest you to avoid the usage of Javascript for this case. Just use CSS, you can find more information about text-selection in CSS [at this question](http://stackoverflow.com/questions/826782/css-rule-to-disable-text-selection-highlighting) — RienNeVaPlu͢s, May 29 '13 at 04:49
The second script likely is too old. Remove the !document.all since I believe it breaks the fx support — mplungjan, May 29 '13 at 04:49
I hate sites doing this. If I want to copy some text I can open up dev tools and copy it anyways. This is just an unnecessary inconvenience. — uylmz, Jun 10 '16 at 20:56
Exactly as Reek says. Don't do this unless you have a very good reason for it. Many people might just want to select something to search for it or use a dictionary to look up a word. Prohibiting this is just an annoyance which might drive people away from your site in long run. — Czechnology, May 02 '17 at 09:36
Firstly, I also hate Pages that forbid selecting (text and whatnot) just for the "fun" of it, but I think it's a good question, as there are some legitimate reasons for one wanting to disable it (_e.g._, to implement mouse gestures or drag&drop of blocks of text in a game of whatever). Of course, using JS to achieve that end is bad, but the CSS solution also has its problems (in some browsers, `user-select` alone won't work, it requires the "-vendor-" prefix, like `-moz-user-select` and `-webkit-user-select`, so, to make it work, it's necessary to set all possible variations to `none`). — Cyberknight, Oct 27 '18 at 00:33

score 220 · Answer 1 · edited May 23 '17 at 12:34

220

Just use this css method:

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

You can find the same answer here: How to disable text selection highlighting using CSS?

edited May 23 '17 at 12:34

Community

1
1

answered May 29 '13 at 04:52

Zachrip

2,911
1
13
29

7

Also add the link from where you found this answer: http://stackoverflow.com/questions/826782/css-rule-to-disable-text-selection-highlighting#4407335 – Ron van der Heijden May 29 '13 at 07:14
Thank you very much. The CSS in body worked for all cases except IE. Is there neat CSS solution to also solve this problem for IE? I'm now using the combination of Js and CSS to cover all browsers!! thk u. – arpeggio May 29 '13 at 10:04
1. Why hasn't this asnwer been tagged as the solution?... It resolves the issue in question in the most accurate and simple way. 2. It should be mentioned that this CSS defition can be implemented on any HTML element and not only BODY. – TheCuBeMan Jan 07 '16 at 10:35
1

@TheCuBeMan "user-select" is a non standard feature, and IMO, is therefore not the best solution. – ndugger Jan 13 '16 at 23:45
1

It probably is the best approach - browsers handle it differently because it's complicated and they all have different takes. Namely, they want to provide the intended UX (no selection) while still allowing the user to select if they _really want to_. The W3C [draft](http://caniuse.com/#search=user-select) has more notes, and [caniuse](https://drafts.csswg.org/css-ui-4/#valdef-user-select-none) shows fantastic support. It's okay that browsers handle it differently - the user will get the experience that their preferred browser provides. – Shawn Erquhart Aug 24 '17 at 01:10
This could be the best option to apply, cause some user can disable javscript on the browser. – mimi Jun 14 '18 at 03:34
I had some text on a draggable button-like element and when I used these declarations the drag script broke (which makes sense). Solution: wrapping the button text in a `` and styling *that* instead. – Mentalist Apr 17 '19 at 00:26

Yi Feng Xie · Answer 2 · 2020-08-10T10:50:09.777

I'm writing slider ui control to provide drag feature, this is my way to prevent content from selecting when user is dragging:

function disableSelect(event) {
    event.preventDefault();
}

function startDrag(event) {
    window.addEventListener('mouseup', onDragEnd);
    window.addEventListener('selectstart', disableSelect);
    // ... my other code
}

function onDragEnd() {
    window.removeEventListener('mouseup', onDragEnd);
    window.removeEventListener('selectstart', disableSelect);
    // ... my other code
}

bind startDrag on your dom:

<button onmousedown="startDrag">...</button>

If you want to statically disable text select on all element, execute the code when elements are loaded:

window.addEventListener('selectstart', function(e){ e.preventDefault(); });

This is the best solution, because the CSS solution does not work for divs with the `contenteditable` attribute (like if you want to disable text selection while the control is being resized by the user's mouse). — mbomb007, Mar 21 '18 at 16:38

score 11 · Answer 3 · answered Dec 12 '14 at 00:00

11

For JavaScript use this function:

function disableselect(e) {return false}
document.onselectstart = new Function (return false)
document.onmousedown = disableselect

to enable the selection use this:

function reEnable() {return true}

and use this function anywhere you want:

document.onclick = reEnable

answered Dec 12 '14 at 00:00

Hassan Azimi

7,252
5
29
37

Except `new Function (return false)` is not a valid javascript code. Use just `document.onselectstart = disableselect`. – amik Jun 10 '20 at 11:44
@amik how about this: `document.oncontextmenu = new Function("return false;");` or this using CSS: `` – Hassan Azimi Jun 10 '20 at 19:44
Yes `new Function("return false;")` would work, but is unnecessarily complicated compared to just using `disableselect` which you already have. `onselectstart="return false"` would work too, but has nothing to do with CSS. Also I've noticed the rest of your answer is wrong too - the `reEnable` function wouldn't work at all. – amik Jun 11 '20 at 11:17
@amik haha well nothing is necessary in JavaScript but we still do it. Certainly, the code can be refactored but take a look at the question, the respond, answers the question not trying to do homework. – Hassan Azimi Jun 11 '20 at 18:08
Well but SO is a place for education, so I consider providing an answer that is both technically wrong and not explaining at all not a good idea. – amik Jun 12 '20 at 10:44
@amik remarks are legit, the reEnable won't work because you left the onmousedown and onselectstart handlers. Also I'd never create a function with new but maybe that's just me. – Apolo Nov 16 '20 at 13:37

score 5 · Answer 4 · edited Mar 09 '19 at 18:34

If you got a html page like this:

    <body
    onbeforecopy = "return false"
    ondragstart = "return false" 
    onselectstart = "return false" 
    oncontextmenu = "return false" 
    onselect = "document.selection.empty()" 
    oncopy = "document.selection.empty()">

There a simple way to disable all events:

document.write(document.body.innerHTML)

You got the html content and lost other things.

NVRM · Answer 5 · 2020-06-19T09:58:12.440

One might also use, works ok in all browsers, require javascript:

onselectstart = (e) => {e.preventDefault()}

Example:

onselectstart = (e) => {
  e.preventDefault()
  console.log("nope!")
  }

Select me!

One other js alternative, by testing CSS supports, and disable userSelect, or MozUserSelect for Firefox.

let FF
if (CSS.supports("( -moz-user-select: none )")){FF = 1} else {FF = 0}
(FF===1) ? document.body.style.MozUserSelect="none" : document.body.style.userSelect="none"

Select me!

Pure css, same logic. Warning you will have to extend those rules to every browser, this can be verbose.

@supports (user-select:none) {
  div {
    user-select:none
  }
}

@supports (-moz-user-select:none) {
  div {
    -moz-user-select:none
  }
}

<div>Select me!</div>

score 0 · Answer 6 · edited Mar 09 '19 at 16:52

0

Simple Copy this text and put on the before </body>

function disableselect(e) {
  return false
}

function reEnable() {
  return true
}

document.onselectstart = new Function ("return false")

if (window.sidebar) {
  document.onmousedown = disableselect
  document.onclick = reEnable
}

edited Mar 09 '19 at 16:52

Martin54

691
2
10
24

answered Sep 19 '18 at 04:44

Hasan Sheikh

303
1
14

javascript: Disable Text Select

6 Answers6

Linked