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

Question

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

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

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

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

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

Текст не является изображением, флэш-памятью или каким-либо другим холстом HTML5. Все находится внутри тегов 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: пользовательский выбор.

Вероятно, вы можете переопределить это, удалив стиль в Developer Tools (нажмите 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);
})();

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

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

Answer 3

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

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

Answer 4

С Firefox есть действительно простой способ:

View > Page Style > No Style

На немецком:

Ansich > Webseiten-Stil > Kein Stil

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

Answer 5

Вы можете нажать Ctrl + P и получить то, что вам нужно из предварительного просмотра печати.

Answer 6

Я использую стилус (https://add0n.com/stylus.html) и создал стиль, который будет применяться ко всем веб-сайтам, и поэтому я гарантирую, что все можно выбрать:

* {
  -webkit-user-select: auto !important;
  -moz-user-select: inherit  !important;
  -ms-user-select: inherit  !important;
  user-select: auto  !important;
}

Звездочкой нужно убедиться, что стиль применяется не только к определенному элементу CSS (например, <body>), но и ко всем элементам. Я встречал случаи, когда блокировка выделения применялась только к тексту кнопки, поэтому создание css для <body> не помогло бы.

Я использую выбор для мгновенного перевода на сайтах иностранных языков.

Answer 7

Я предпочитаю использовать « букмарклеты » для пользовательских скриптов или расширений браузера. Попробуйте использовать один из множества букмарклетов, чтобы отключить CSS и захватить необходимый текст

Так как это может испортить читаемость веб-страницы, я иногда открываю страницу на другой вкладке (щелкните правой кнопкой мыши на вкладке, выберите «Дублировать») перед удалением стилей с помощью букмарклета.

Вы также можете попробовать букмарклет Google Mobilizer для просмотра только текста веб-страниц.

Answer 8

Некоторые из предложенных решений могут зависеть от браузера, поэтому стоит предложить несколько альтернатив:

1. Используйте брашера, который уважает вас больше.

   а. В Emacs есть браузеры emacs-w3m и eww , которые всегда позволяют выбирать текст.

   б. Другие текстовые браузеры, такие как lynx , elinks и w3m , могут позволять выделять текст, но даже если нет, при запуске этих программ в окне терминала можно выбирать текст с помощью мыши. И если вы используете эти программы из tmux , вы можете использовать способность tmux копировать текст даже без мыши.

2. Используйте инструмент командной строки, чтобы загрузить весь URL в читаемом текстовом формате.

   а. w3m -dump [your_url] > your_file.txt

   б. lynx -dump [your_url] > your_file.txt . Я обычно предпочитаю этот, потому что он отмечает гиперссылки как читаемые сноски!

Answer 9

Как уже говорилось в других ответах, это связано с CSS на теле страниц. Хотя вы можете редактировать это вручную каждый раз, если вы часто используете этот сайт, я бы посоветовал вам установить Chrome, чтобы установить расширение Stylish .

Стильный позволяет создавать дополнительные CSS для применения к страницам. Он может быть использован во всем Интернете. Преимущество заключается в автоматическом применении при каждом посещении веб-сайта (поэтому вам не нужно добавлять его с помощью инструментов разработчика при каждой загрузке страницы).

После установки нажмите значок на панели инструментов и выберите "Создать новый стиль". Он автоматически создаст запись для веб-сайта, который вы сейчас посещаете. Затем вы можете добавить любой понравившийся вам CSS на страницу. Но имейте в виду: некоторые стили не могут быть переопределены (особенно если они написаны на самом элементе, а не на классе CSS).

В этом случае вы можете использовать функцию импорта и добавить приведенный ниже код, это позволит вам выбрать текст на веб-сайте, на который вы ссылаетесь.

@-moz-document domain("www.angst-panik-hilfe.de") {
  body {
    -webkit-user-select: auto !important;
    -moz-user-select: inherit  !important;
    -ms-user-select: inherit  !important;
    user-select: auto  !important;
  }
}