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 — RienNeVaPlu͢s
– RienNeVaPlu͢s, Commented May 29, 2013 at 4:49
The second script likely is too old. Remove the !document.all since I believe it breaks the fx support — mplungjan
– mplungjan, Commented May 29, 2013 at 4: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
– uylmz, Commented Jun 10, 2016 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
– Czechnology, Commented May 2, 2017 at 9: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
– Cyberknight, Commented Oct 27, 2018 at 0:33

Community · Accepted Answer · 2017-05-23 12:34:30Z

262

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, 2017 at 12:34

CommunityBot

11 silver badge

answered May 29, 2013 at 4:52

Zachrip

3,4221 gold badge21 silver badges32 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

Ron van der Heijden Over a year ago

Also add the link from where you found this answer: stackoverflow.com/questions/826782/…

arpeggio Over a year ago

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.

TheCuBeMan Over a year ago

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.

ndugger Over a year ago

@TheCuBeMan "user-select" is a non standard feature, and IMO, is therefore not the best solution.

Shawn Erquhart Over a year ago

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 has more notes, and caniuse shows fantastic support. It's okay that browsers handle it differently - the user will get the experience that their preferred browser provides.

|

Yi Feng Xie · Accepted Answer · 2020-08-10 10:50:09Z

39

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(); });

edited Aug 10, 2020 at 10:50

answered Feb 23, 2017 at 14:54

Yi Feng Xie

5,1271 gold badge28 silver badges31 bronze badges

1 Comment

mbomb007 Over a year ago

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).

Eric Azimi · Accepted Answer · 2014-12-12 00:00:17Z

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, 2014 at 0:00

Eric Azimi

9,7676 gold badges36 silver badges45 bronze badges

7 Comments

amik Over a year ago

Except new Function (return false) is not a valid javascript code. Use just document.onselectstart = disableselect.

Eric Azimi Over a year ago

@amik how about this: document.oncontextmenu = new Function("return false;"); or this using CSS: <body onselectstart="return false">

amik Over a year ago

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.

Eric Azimi Over a year ago

@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.

amik Over a year ago

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.

|

Martin54 · Accepted Answer · 2019-03-09 18:34:31Z

6

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.

edited Mar 9, 2019 at 18:34

Martin54

1,9002 gold badges18 silver badges39 bronze badges

answered May 3, 2018 at 11:02

bootsoon

8579 silver badges13 bronze badges

1 Comment

Joseph Ali Over a year ago

this is the only solution that worked for me, most of the text on my website pages is populated by js, maybe that's why other solutions didn't work!

NVRM · Accepted Answer · 2020-06-19 09:58:12Z

5

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>

edited Jun 19, 2020 at 9:58

answered Dec 19, 2018 at 22:19

NVRM

13.5k2 gold badges102 silver badges102 bronze badges

2 Comments

Yohan W. Dunon Over a year ago

On Safari Version 14.1.1, the first proposition is supported but not the last ones. On Firefox Developer Edition 92.0b3 (64 bits) all of them are supported.

bnns Over a year ago

None of these appear to work on iOS Safari, hmmm... testing with 13.7 i will look at other versions to see if there is some additional progress.

Martin54 · Accepted Answer · 2019-03-09 16:52:08Z

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 9, 2019 at 16:52

Martin54

1,9002 gold badges18 silver badges39 bronze badges

answered Sep 19, 2018 at 4:44

proghasan

4253 silver badges20 bronze badges

Collectives™ on Stack Overflow

javascript: Disable Text Select

6 Answers 6

7 Comments

1 Comment

7 Comments

1 Comment

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

7 Comments

1 Comment

7 Comments

1 Comment

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related