【问题标题】:How to disable selection of text on a web page如何禁用网页上的文本选择
【发布时间】:2012-09-01 04:22:15
【问题描述】:

我正在尝试使网页非常原生。 如何删除选择,选择网页中的所有属性?

【问题讨论】:

  • 到目前为止,您得到了三个截然不同的答案:也许您应该更好地说明“本机”对您的确切含义以及您要删除的内容
  • 您要做的是阻止用户通过拖动鼠标选择文本并复制它或使用 CTRL+A (Windows) 选择所有内容并复制它,对吧?
  • 是的,正确。防止用户选择整个网页,不仅是文本,网页中的所有内容
  • @Pavlo 这不是那个的副本。那是关于删除突出显示,这是关于删除从网页复制任何内容的可能性。所以它是重复的,但是这个stackoverflow.com/questions/9958478/…
  • @selva 是的,visibilitydisplayuser-select 是 CSS 属性。但是你不能“选择”它们,你只能用所谓的 CSS 声明来设置它们。检查我的答案。

标签: javascript html css


【解决方案1】:

您可以通过在您的正文标签 oncontextmenu="return false; 中添加属性来禁用;

<body oncontextmenu="return false;">

【讨论】:

【解决方案2】:

希望对你有帮助

<div onselectstart="return false;" style="-moz-user-select: none;">

【讨论】:

  • 一个好的开始,但不会阻止在我的测试中全选(Windows 中的 CTRL+A)。
【解决方案3】:

使用 CSS 禁用每个元素的选择

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

Chrome、Safari、Firefox、IE 10 和 iOS 设备均支持此功能。有关MDN page 的更多信息。

编辑:如果您希望 &lt;input&gt;&lt;textarea&gt; 在 Firefox 中保持可选状态,请添加:

input,
textarea {
     -moz-user-select: text;
}

使用 jQuery 禁用上下文菜单

$(document).on("contextmenu", function (event) { event.preventDefault(); });

【讨论】:

  • 节省了我的一天。我不知道这在 CSS 中可以这么简单。我用javascript尝试了一整天,发现了这个。
【解决方案4】:

此 JavaScript 将禁用内容的选择、复制和粘贴 但是,如果用户将页面保存到本地计算机,他们将能够使用您的代码做任何他们想做的“任何事情”。

//disable cut copy past
var message = "";
function clickIE() { if (document.all) { (message); return false; } }
function clickNS(e) {
    if(document.layers || (document.getElementById && !document.all)) {
        if (e.which == 2 || e.which == 3) { (message); return false; }
    }
}
if (document.layers)
{ document.captureEvents(Event.MOUSEDOWN); document.onmousedown = clickNS; }
else { document.onmouseup = clickNS; document.oncontextmenu = clickIE; }
 document.oncontextmenu = new Function("return false")


//for disable select option
document.onselectstart = new Function('return false');
function dMDown(e) { return false; }
function dOClick() { return true; }
document.onmousedown = dMDown;
document.onclick = dOClick;

【讨论】:

  • 在 wpf 网络浏览器中工作!
【解决方案5】:

使用此代码https://www.docsity.com/it/teorie-e-pratiche-del-web-4/556038/

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

【讨论】:

  • 不错。我用过这个,但没有body 标签。当 body 标签已经被应用到整个 html 时,是否有任何理由使用它?
【解决方案6】:
element_name{
  -webkit-touch-callout: none; 
  -webkit-user-select: none;
  -khtml-user-select: none; 
  -moz-user-select: none;
  -ms-user-select: none; 
   user-select: none;
 }

【讨论】:

  • 虽然此代码可能会回答问题,但提供有关它如何和/或为什么解决问题的额外上下文将提高​​答案的长期价值。
猜你喜欢
  • 2012-03-16
  • 2011-07-03
  • 1970-01-01
  • 2021-05-15
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2016-12-24
相关资源
最近更新 更多