Javascript: disable text selection

Question

Javascript: disable text selection

I use JavaScript to disable text selection on my website.

The code:

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

A similar script can be found here.

On my localhost: all browsers (Firefox, Chrome, IE and Safari) work fine.

On my Live site: everything is fine except Firefox.

My questions:

Does anyone have any suggestions as to why Firefox behaves differently for a live site and localhost. Note: Javascript is included.
Maybe my script is too simplistic, so I tried the following with EXACTLY SAME Results

+60

javascript

arpeggio May 29 '13 at 4:47

source share

6 answers

Zachrip · Answer 1 · 2013-05-29 04:52

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

Here you can find the same answer: How do I turn off text selection highlighting using CSS?

Yi Feng Xie · Answer 2 · 2017-02-23 14:54

I am writing a slider ui control to provide a drag and drop function, this is my way to prevent the content from being selected when dragging the user:

 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 to your dom:

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

If you want to statically disable text selection in the entire element, execute the code when loading the elements:

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

Hassan Azimi · Answer 3 · 2014-12-12 00:00

For JavaScript, use this function:

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

To enable selection:

 function reEnable() {return true}

and use this function anywhere:

 document.onclick = reEnable

bootsoon · Answer 4 · 2018-05-03 11:02

If you got an 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 is an easy way to disable all events:

document.write(document.body.innerHTML)

You got HTML content and lost other things.

Hasan Sheikh · Answer 5 · 2018-09-19 04:44

Just copy this text and put it 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 }

Cryptopat · Answer 6 · 2018-12-19 22:19

You can also use:

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

Example:

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

 Select me!

Another alternative, by testing CSS support and disabling user selection:

 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"

Javascript: disable text selection

More articles: