Каким образом веб-сайты блокируют выделение текста и как это разблокировать?

Question

Есть сайт (пример), который каким-то образом блокирует выделение текста. Также он блокирует Ctrl+ Aдля выделения всего, также нет «Копировать» во всплывающем меню.

Что я пробовал:

Некоторые сайты используют JavaScript для блокировки выделения. Поэтому я отключил все источники JavaScript в дополнении no-script в Firefox. Я попробовал тот же сайт в Google Chrome с дополнением Script Safe. Убедился, что все заблокировано, все равно не могу выделить текст. Указатель мыши остается стрелкой, а не текстовым курсором также на всем сайте.

Использовал about:configдля полного отключения JavaScript в Firefox. По-прежнему нет эффекта.

Я читал, что некоторые сайты используют DIV со стилем display:block, поэтому я использовал Inspect, чтобы проверить стили сайта. На всем сайте нет ни одного упоминания "block", ни во встроенном CSS, ни в object style=-attributes.

Текст не является изображением, флэш-памятью или каким-либо HTML5 Canvas и т. д. Все находится в тегах DIV и P, но не найдено стилей, которые могли бы заблокировать выбор текста.

Как веб-сайт может все еще блокировать любой выбор текста? Не говоря уже о том, почему браузеры вообще поддерживают такое поведение. Я просто хочу использовать выбранное слово или предложение и хочу выполнить поиск в Google с помощью правой кнопки мыши. Это довольно раздражает, когда веб-сайт делает такие вещи и заставляет меня вручную вводить технические термины и названия в Google. Это мешает моему рабочему процессу.

Answer 1

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}

Таким образом, этот эффект применяется ко всему тегу BODY.

Документация по этому CSS:Сайт разработчика Mozilla: выбор пользователя.

Вероятно, вы могли бы переопределить это, удалив стиль в Инструментах разработчика (нажмите F12в Firefox или Chrome) — вы даже можете создать апплет JavaScript, который, после того как вы потратите время на его настройку, сможет удалить этот стиль с меньшими усилиями с вашей стороны (что может сэкономить время, если вы планируете посещать сайт несколько раз).

Я также хотел бы добавить это примечание: Это может быть не единственным способом получить хотя бы часть этого эффекта. Другой возможный способ - иметь невидимую DIVкрышку, DIVкоторая имеет текст. Таким образом, курсор мыши не превратится в I-образную балку (текстовый курсор), потому что курсор будет основан на содержимом самого верхнего DIV. ( Ctrl- Aвероятно, хотя и будет закрывать этот текст.)

Это довольно раздражает, когда веб-сайт делает такие вещи и заставляет меня вручную вводить технические термины и названия в Google. Это мешает моему рабочему процессу.

Аминь! Увидев это, я разочарован тем, что такой стиль CSS реализован в основных браузерах. Такие вещи действительно раздражают!

Answer 2

Как уже было сказано, настройка 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);
})();

Примечание:Если оставить эту функцию включенной, она будет применяться ко всем страницам, что может быть нежелательно во всех ситуациях.

Скрипт можно установить и легко включать/выключать с помощью менеджера пользовательских скриптов, напримерЖестокая обезьяна,Tampermonkey, илиГрязная обезьяна.

Answer 3

Самый простой способ решить эту проблему — использовать букмарклет:

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

Поэтому, когда вам захочется включить выделение текста на каком-нибудь раздражающем веб-сайте, просто нажмите на эту закладку.

Этот код заботится о наиболее частых способах на основе CSS и JavaScript, которые используют придурки для отключения выделения текста на своих веб-сайтах. Хотя некоторые менее частые способы могут потребовать дополнительных корректировок кода.

Answer 4

Откройте инструменты разработчика (F12), перейдите на вкладку «Элементы» и снимите отметки со следующих правил CSS в разделетело:

• выбор пользователя: нет;
• webkit-user-select: нет;