禁用文本选择

我正在使用 javascript 来禁用我的网站上的文本选择。

密码是:

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

类似的脚本可以找到 给你

在我的本地主机上: 所有的浏览器(Firefox，Chrome，IE 和 Safari)都很好用。

在我的 Live 站点上: 除了 Firefox 之外，一切都很好。

我的问题是:

  1. 有没有人对为什么 Firefox 在实时站点和本地主机上的表现不同有什么建议。注意: 已启用 Javascript。

  2. 也许我的脚本过于简单，所以我已经尝试了 跟随与完全相同的结果

126697 次浏览
小开

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?

小开

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

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

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.

小开

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
}
小开

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>


提交答案