javascript: Disable Text Select - Stack Overflow

admin管理员组

文章数量:1134247

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:

1. Does anyone have a suggestion as to why Firefox behaves differently for the live site and local host. Note: Javascript is enabled.

2. Maybe my script is too simplistic so I've tried the following with EXACTLY SAME Results

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:

1. Does anyone have a suggestion as to why Firefox behaves differently for the live site and local host. Note: Javascript is enabled.

2. Maybe my script is too simplistic so I've tried the following with EXACTLY SAME Results

• javascript

Share Improve this question Follow edited Mar 9, 2019 at 20:40 Martin54 1,85222 gold badges1717 silver badges3737 bronze badges asked May 29, 2013 at 4:47 arpeggioarpeggio 1,12122 gold badges88 silver badges66 bronze badges 6

• 4 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 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 Commented May 29, 2013 at 4:49
• 13 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 Commented Jun 10, 2016 at 20:56
• 5 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 Commented May 2, 2017 at 9:36
• 3 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 Commented Oct 27, 2018 at 0:33

 |  Show 1 more comment

6 Answers 6

Sorted by: Reset to default 260

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?

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

      

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

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.

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>

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
}

本文标签： javascript Disable Text SelectStack Overflow