CODEWITHSUNDEEP
javascript
arpeggio
arpeggio

Reputation: 1121

javascript: Disable Text Select

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

Upvotes: 108

Views: 138259

Answers (6)

Yi Feng Xie
Yi Feng Xie

Reputation: 5017

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

Upvotes: 38

NVRM
NVRM

Reputation: 13087

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>

Upvotes: 5

bootsoon
bootsoon

Reputation: 857

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.

Upvotes: 6

proghasan
proghasan

Reputation: 425

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
}

Upvotes: 0

Azimi
Azimi

Reputation: 9627

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

Upvotes: 11

Zachrip
Zachrip

Reputation: 3382

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?

Upvotes: 260

Related Questions