javascript: Disable Text Select
JavascriptJavascript Problem Overview
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
Javascript Solutions
Solution 1 - Javascript
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: https://stackoverflow.com/questions/826782/css-rule-to-disable-text-selection-highlighting#4407335
Solution 2 - Javascript
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(); });
Solution 3 - Javascript
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
Solution 4 - Javascript
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.
Solution 5 - Javascript
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>
Solution 6 - Javascript
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
}