javascript：禁用文本选择

IT技术 javascript
2021-03-17 13:15:00

我正在使用 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. 也许我的脚本太简单了，所以我用完全相同的结果尝试了以下操作

6个回答

只需使用此 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;
}

您可以在这里找到相同的答案：如何使用 CSS 禁用文本选择突出显示？

还要添加您找到此答案的链接：stackoverflow.com/questions/826782/...
2021-04-22 13:15:00
非常感谢你。正文中的 CSS 适用于除 IE 之外的所有情况。是否有简洁的 CSS 解决方案也可以为 IE 解决这个问题？我现在用Js和CSS的结合来覆盖所有浏览器！！谢谢你。
2021-04-27 13:15:00
这可能是最好的方法 - 浏览器以不同的方式处理它，因为它很复杂，而且它们都有不同的需求。也就是说，他们想要提供预期的 UX（无选择），同时仍然允许用户选择他们是否真的想要。W3C草案有更多注释，caniuse显示了出色的支持。浏览器以不同的方式处理它是可以的 - 用户将获得他们喜欢的浏览器提供的体验。
2021-05-01 13:15:00
1.为什么这个答案没有被标记为解决方案？...它以最准确和最简单的方式解决了问题。2. 需要说明的是，这个CSS定义可以在任何HTML元素上实现，而不仅仅是BODY。
2021-05-11 13:15:00
@TheCuBeMan“用户选择”是非标准功能，因此 IMO 不是最佳解决方案。
2021-05-12 13:15:00

我正在编写滑块 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(); });
这是最好的解决方案，因为 CSS 解决方案不适用于具有contenteditable属性的div （例如，如果您想在用户鼠标调整控件大小时禁用文本选择）。
2021-05-08 13:15:00

对于 JavaScript 使用这个函数：

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

要启用选择，请使用：

function reEnable() {return true}

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

document.onclick = reEnable
是的new Function("return false;")会起作用，但与仅使用disableselect您已有的相比，它不必要地复杂。onselectstart="return false"也可以，但与 CSS 无关。此外，我还注意到您的其余答案也是错误的 - 该reEnable功能根本不起作用。
2021-04-21 13:15:00
@amik 这个怎么样：document.oncontextmenu = new Function("return false;");或者这个使用 CSS：<body onselectstart="return false">
2021-04-24 13:15:00
@amik haha​​ 好吧，JavaScript 中什么都不需要，但我们仍然这样做。当然，代码可以重构，但看问题，回答，回答问题而不是试图做功课。
2021-05-02 13:15:00
除了new Function (return false)不是有效的 javascript 代码。仅使用document.onselectstart = disableselect.
2021-05-11 13:15:00
嗯，但是 SO 是一个教育场所，所以我考虑提供一个在技术上是错误的并且根本没有解释的答案，这不是一个好主意。
2021-05-19 13:15:00

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

    <身体
    onbeforecopy = "返回假"
    ondragstart = "返回假" 
    onselectstart = "返回假" 
    oncontextmenu = "返回假" 
    onselect = "document.selection.empty()" 
    oncopy = "document.selection.empty()">

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

document.write(document.body.innerHTML)

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

也可以使用，在所有浏览器中都可以正常工作，需要 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>

在 Safari 版本 14.1.1 上，支持第一个命题，但不支持最后一个命题。在 Firefox Developer Edition 92.0b3（64 位）上，所有这些都受支持。
2021-04-28 13:15:00
这些似乎都不适用于 iOS Safari，嗯……使用 13.7 进行测试，我将查看其他版本以查看是否有其他进展。
2021-05-10 13:15:00
其它你可能感兴趣的问题
上一篇在 HTML 属性中存储 JSON 的最佳方式？ 下一篇在 IE6 中使用一个 (CSS) 维度缩放图像时如何保持纵横比？