javascript - javascript: Disable Text Select

Question

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

Answer 1

只需使用此 css 方法：

body{
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

您可以在这里找到相同的答案：How to disable text selection highlighting using CSS?

Answer 2

我正在编写滑块 ui 控件以提供拖动功能，这是我在用户拖动时防止内容选择的方法：

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
}

绑定startDrag在你的 dom 上：

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

如果要在所有元素上静态禁用文本选择，请在加载元素时执行代码：

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

      

Answer 3

对于 JavaScript，请使用此函数：

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

要启用选择，请使用：

function reEnable() {return true}

并在您想要的任何地方使用此功能：

document.onclick = reEnable

Answer 4

如果你有一个这样的 html 页面：

    <正文
    onbeforecopy = "返回假"
    ondragstart = "返回假"
    onselectstart = "返回假"
    oncontextmenu = "返回 false"
    onselect = "document.selection.empty()"
    oncopy = "document.selection.empty()">

有一种简单的方法可以禁用所有事件：

document.write(document.body.innerHTML)

您获得了 html 内容并丢失了其他内容。

Answer 5

也可以使用，在所有浏览器中都可以正常工作，需要 javascript：

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

例子：

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

Select me!

---

另一种 js 替代方案，通过测试 CSS 支持和禁用userSelect，或MozUserSelect用于 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!

---

纯css，同样的逻辑。警告您必须将这些规则扩展到每个浏览器，这可能很冗长。

@supports (user-select:none) {
  div {
    user-select:none
  }
}

@supports (-moz-user-select:none) {
  div {
    -moz-user-select:none
  }
}

<div>Select me!</div>

Answer 6

简单复制这段文字并放在前面</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
}