网站如何阻止选择文本以及如何取消阻止?

use*_*530 95 browser firefox google-chrome javascript

有一个网站(示例)以某种方式阻止选择文本。它也阻止Ctrl+A选择所有内容,弹出菜单中也没有“复制”。

我尝试过的:

某些站点使用 JavaScript 来阻止选择。所以我在 Firefox 的无脚本插件中禁用了所有 JavaScript 源。我使用 Script Safe 插件在 Google Chrome 中尝试了相同的站点。确保一切都被阻止,仍然无法选择文本。鼠标指针在整个站点上仍然是一个箭头而不是文本光标。

用于about:config在 Firefox 中完全禁用 JavaScript。还是没有效果。

我读到一些站点使用带有样式 display:block 的 DIV,所以我使用 Inspect 来检查站点的样式。整个网站上都没有提到“块”,嵌入式 CSS 和对象样式=-attributes 中都没有。

文本不是图像或 Flash 或某些 HTML5 画布等。一切都在 DIV 和 P 标签内,但没有找到可能阻止文本选择的样式。

该网站如何仍然阻止任何文本选择?更不用说为什么浏览器完全支持这种行为了。我只想使用选定的单词或句子,并想使用鼠标右键单击谷歌搜索它。当一个网站做这样的事情并强迫我手动在谷歌中输入技术术语和名称时,这很烦人。它扰乱了我的工作流程。

TOO*_*GAM 90

https://www.angst-panik-hilfe.de/angst-panik.css显示:

body{-webkit-user-select:none;-moz-user-select:-moz-none;
-ms-user-select:none;user-select:none}
Run Code Online (Sandbox Code Playgroud)

因此,该效果适用于整个 BODY 标签。

关于此 CSS 的文档:Mozilla 开发者站点:用户选择

您可能可以通过删除开发人员工具中的样式(F12在 Firefox 或 Chrome 中按)来覆盖它- 您甚至可以创建一个 JavaScript 小程序,在花时间进行设置后,可以轻松删除该样式您的部分(如果您计划多次访问该站点,这可能会节省时间)。

我还想补充一点:这可能不是至少产生某些效果的唯一方法。另一种可能的方法是使用带有文本的隐形DIV封面DIV。这样,鼠标光标就不会变成 I 型梁(文本光标),因为光标将基于最顶层DIV. (Ctrl- 不过A,可能会涵盖该文本。)

当一个网站做这样的事情并强迫我手动在谷歌中输入技术术语和名称时,这很烦人。它扰乱了我的工作流程。

阿门!看到这一点,我对主要浏览器实现的这种 CSS 样式的存在感到失望。这样的事情真的很烦人,确实!

  • `user-select` CSS 样式在负责任地应用时非常有用。例如,如果您希望(尤其是年长的)用户在触摸屏上单击标签文本附近的按钮,您不希望他们标记标签文本而不是单击按钮。 (62认同)
  • 你是什​​么意思“默认”?此设置仅在网站专门启用时才启用,这对我来说听起来不像“默认”。总会有一些功能可能会被糟糕的网页设计师滥用,在不给那些有正当理由使用这些功能的人带来负面影响的情况下,你无能为力…… (14认同)
  • @SeanT 同样,如果浏览器的存在是为了为查看网页的人提供服务,那么它的工作就是响应 Web 服务器发送的内容,但用户告诉它。如果用户告诉它静音页面,或禁止弹出窗口,或复制文本,那么浏览器应该这样做。 (13认同)
  • @Accumulation user-select: none 功能在所有地方都被使用来保持网页的风格,例如,从下拉列表中选择一个选项时停止丑陋的蓝色背景。您只是没有注意到,因为它正在正确实施。这里的问题是它以对用户的限制方式实现,浏览器无法区分两者。因此,责怪开发人员:) (13认同)
  • 没有浏览器用户会费心配置他们的浏览器来显式启用这样的功能,如果默认情况下没有启用它,那么它本质上是无用的,也可能根本没有实现。如果您建议*每个*功能必须由用户明确启用,那么您在哪里划线?在网站可以显示图像之前,用户是否必须启用“图像”功能?在用户启用他们想要的所有功能之前,所有浏览器都必须默认为 Lynx 吗? (8认同)
  • 另一个细节是要记住 HTML 不仅适用于 Web。有很多游戏在界面上使用它,在这些游戏中,选择文本没有意义,用户会出于各种原因单击并拖动鼠标。 (3认同)
  • @SeanBurton,如果您将网站管理员视为浏览器的“用户”,那么允许他们启用功能是有意义的。但是,如果您认为浏览器的存在只是为了为浏览网页的人提供服务,那么是否应该启用某项功能应该由他们决定。 (2认同)
  • @SeanBurton:嘿,默认情况下,Lynx 具有“选择后跟随 `<a>` 标签”和“在 `<br>` 上插入换行符”功能。它比这个假设的浏览器要好得多。;-) (2认同)
  • 另一种方法是在正文中添加 `onselectstart="return false;"`。其他一些技术(例如,使用 JavaScript 删除选择)也适用。 (2认同)
  • @SeanT - 我认为浏览器的工作是为用户提供服务,让用户以用户期望的方式查看渲染的代码。网页代码指示浏览器需要什么,但由浏览器决定,并且执行页面代码所说的任何内容都不是浏览器的工作,因为浏览器为用户服务,而不是网络服务器(或网站管理员/页面设计者)。如果菜单显示一些 unicode/emoji,我想将其复制并粘贴到 Google 中以查找字符的代码,我不喜欢 JavaScript/CSS 试图禁用我轻松选择文本的能力(如果这就是我想要做的) 。 (2认同)
  • 好吧,[this](https://i.imgur.com/eYOLGVh.png) 是当开发人员忘记禁用选择(这是一个使用 Web 技术构建的 UI)时发生的情况。如果您希望您的应用程序感觉像一个实际的应用程序而不是一个文本文档,禁用选择是要走的路。但是在网站上这样做是一个非常糟糕的设计选择。 (2认同)

Her*_*tar 20

如前所述,user-select: none页面 CSS 中的设置是禁用页面上文本选择的原因。删除该文本选择块的最简单方法是通过如下覆盖设置的用户脚本:

// ==UserScript==
// @name         Force Select
// @version      1.0
// @description  Stop sites from disabling selection of text
// @author       You
// @match        *://*/*
// @grant        none
// ==/UserScript==

(function() {
  'use strict';

  let style = document.createElement('style');
  style.innerHTML = '*{ user-select: auto !important; }';

  document.body.appendChild(style);
})();
Run Code Online (Sandbox Code Playgroud)

注意:如果启用,这将适用于每个页面,这可能不是在所有情况下都需要的。

可以使用用户脚本管理器(例如ViolentmonkeyTampermonkeyGreasemonkey )安装和轻松打开/关闭脚本。

  • 值得一提的是,您可能需要诸如“greasemonkey”之类的扩展来添加用户脚本。 (9认同)

小智 15

解决此问题的最简单方法是使用书签:

  1. 在浏览器中创建一个新书签。
  2. 例如,将其命名为“启用选择”(不带引号)或您喜欢的任何名称。
  3. 在位置文本框中粘贴以下代码:
javascript:(function(){var style=document.createElement('style');
style.innerHTML='*{user-select: auto !important;} ::selection{background-color: blue !important; color: white !important}';
document.body.appendChild(style);
document.body.onselectstart=function(){return true};
document.body.onmousedown=function(){return true};
document.onkeydown=function(){return true};
})();
Run Code Online (Sandbox Code Playgroud)

因此,每当您想在某些烦人的网站上启用文本选择时,只需单击此书签即可。

这段代码处理了最常见的基于 CSS 和 JavaScript 的方法,这些方法被混蛋用来禁用其网站上的文本选择。尽管一些不太常见的方法可能需要对代码进行一些额外的调整。


JMK*_*JMK 11

打开开发者工具(F12),切换到 Elements 选项卡,然后取消body下的以下 CSS 规则:

  • 用户选择:无;
  • webkit-user-select:无;

演示图片


Eri*_*nil 8

使用 Firefox,有一个非常简单的方法:

View > Page Style > No Style
Run Code Online (Sandbox Code Playgroud)

在德国:

Ansicht > Webseiten-Stil > Kein Stil
Run Code Online (Sandbox Code Playgroud)

在此处输入图片说明

下载已禁用右键单击的嵌入图像也很有效。


Der*_*ler 8

您可以点击Ctrl+P并从打印预览中获取所需内容。

在此处输入图片说明

  • 对于那些不想安装另一个扩展或干扰开发人员工具控制台的人来说,这是一个绝妙的技巧。 (3认同)

小智 6

我正在使用 Stylus ( https://add0n.com/stylus.html ),并且我制作了一种适用于所有网站的样式,因此我确保所有内容都是可选的:

* {
  -webkit-user-select: auto !important;
  -moz-user-select: inherit  !important;
  -ms-user-select: inherit  !important;
  user-select: auto  !important;
}
Run Code Online (Sandbox Code Playgroud)

星号是为了确保样式不仅应用于某个 css 元素(如<body>),而且应用于所有元素。我遇到过选择阻止仅应用于按钮文本的情况,因此制作 css<body>没有帮助。

我在外语网站上使用选择进行即时翻译。