Как выделить текст на сайте
Перейти к содержимому

Как выделить текст на сайте

  • автор:

Как выделить текст на сайте

copy paste

Ну, за 30 секунд – это условно, все зависит от ваших навыков. Возможно, для вас и 10-ти достаточно:)

Если текст нельзя скопировать – это означает лишь одно, он защищен. В большинства возникнет вполне привычный вопрос. Зачем? Не хочешь чтобы кто-то использовал – не размещай в интернете. Но такой запрет направлен не на пользователей, а на недобросовестных блоггеров и других людей, которые просто воруют чужой труд и выдают его за свой. То есть авторы защищают собственное авторское право. Давайте рассмотрим как скопировать защищенный текст для собственных нужд, которые не нарушают авторские права. Ведь печатать на клавиатуре слишком скучное дело.

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

Способ 1. Плагин для браузера Google Chrome: Enable Right Click & Copy

Вот например, нашел кроссворд. Обычным образом его не только скопировать невозможно, но и выделить.

2. Нажимаем на кнопку расширения (она появится сверху справа после установки). Включаем опцию «Enable Copy» (если не помогло, то также «Absolute Mode». Данный режим удаляет любой тип защиты).

copy paste

3. Теперь текст прекрасно выделяется и копируется.

copy paste

Обратите внимание, что для каждого нового сайта нужно заново включать «Enable Copy».

Читайте также аналогичную статью, но с более сложными способами: « Как скопировать текст с сайта, который защищен от копирования »

Способ 2. Плагин для браузера Google Chrome: Just Read

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

2. Нужно просто нажать (левой клавишей мыши) на кнопку расширения, которую можно заметить сверху над панелью закладок. После этого можно текст копировать. Для удобства можно указать область на странице для отображения в режиме чтения. Для этого нужно щелкнуть не левой, а правой кнопкой мыши и выбрать «Select content to read». Далее выбрать область с текстом на странице.

copy paste

copy paste

Способ 3. Используем редактор Microsoft Office Word

1. Копируем адрес страницы, с которой нужно копировать текст.

copy paste

2. Запускаем Microsoft Office Word и выбираем «Открыть» → «Обзор».

3. В окне для открытия файла, напротив «Имя файла» вставляем в поле нашу скопированную ссылку и нажимаем на кнопку «Открыть».

copy paste

4. Появится окно с предупреждением. Нужно просто нажать на «Ок». Редактор Word откроет документ, который можно будет спокойно редактировать. Если при первой попытке открытия ничего не произошло, нужно повторить еще раз.

Способ 4. Альтернативный и нежелательный, хотя может помочь в случаях, когда все остальные не работают

Каждая интернет страница, которую вы видите при посещении сайта имеет другую сторону – определенный код. Его можно посмотреть при нажатии на клавиши Ctrl + U (пример для браузера Google Chrome).

1. Нажимаем Ctrl+U, должна открыться новая страница с исходным кодом. Запоминаем первые слова текста, который нам нужно скопировать (так легче будет найти его в коде).

2. Нажимаем на открытой странице с кодом сочетание клавиш Ctrl+F. Откроется окно с поиском. Вводим первые слова, которые запомнили.

copy paste

3. Видим результаты поиска – это начало текста. Отсюда и начинаем копирование. Заканчиваем там, где будут последние слова (их можно посмотреть на нашей открытой веб-странице, которая находится на отдельной вкладке браузера).

copy paste

4. Открываем сайт konstantinbulgakov.com и вставляем скопированный с непонятными символами текст в левое окно. После этого нажимаем на кнопку «Удалить теги». В окне справа вы увидите «чистый» текст, который уже можно использовать.

copy paste

Это не все возможные способы, однако их должно быть достаточно в большинстве случаев.

Как выделить и скопировать текст на сайтах, которые это блокируют

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

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

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

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

Метод 1: отключение JavaScript

30421

Большинство веб-сайтов используют JavaScript для блокировки функций мышки. Если вы временно или даже постоянно выключите JavaScript на этом сайте, вы сможете копировать отображённый на них текст используя мышку.

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

Пользователи Firefox могут нажать F12, кликнуть на иконки настроек (шестерёнка) и отключить JavaScript в открывшемся меню.

Пользователи Chrome могут отключить JavaScript в настройках контента: chrome://settings/content

Пользователи Internet Explorer могут отключить JavaScript в Свойствах браузера > Безопасность > Зоны > Другой > Активные сценарии

Пользователи Opera могут отключить JavaScript на веб-сайтах в настройках Оперы: opera://settings/

Ссылка скрыта от гостей

могут быть полезными в этом отношении, поскольку они также могут блокировать выполнение сценариев.

Метод 2: Исходник

30422

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

Просто нажмите Ctrl-U, когда вы находитесь на сайте, для отображения исходного кода. Это работает в большинстве браузеров, включая Firefox, Chrome и Internet Explorer.

Но вам придётся самим найти необходимый текст или контент, который вам нужен, в этом исходнике. Используйте Ctrl-f для быстрого перехода к нему.

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

Метод 3: Расширения и скрипты
Третий и последний вариант — наиболее подходящий если вы регулярно сталкиваетесь с сайтами, которые запрещают правый клик или копирование текста, когда вы на них, и если вышеперечисленные методы не работают или не подходят.

RightToClick for Firefox отключает раздражительные проявления JavaScript, такие как запрет правого клика или выделение текста на сайтах.

Ссылка скрыта от гостей

предлагает похожие функции.

Вы найдёте целую кучу расширений для этих двух браузеров, которые удалят раздражающие вещи с веб-сайтов.

П.с. если нужно быстро скопировать что-то с сайта, а устанавливать расширения не хочется. Самый простой способ — сохраните страницу на жёсткий диск. У вас появится сама страница с расширением .html и каталог с таким же названием, как и страница. Переименуйте этот каталог (не важно, какое будет новое имя — главное, чтобы оно было отличным от первоначального) и запустите файл .html — теперь вы можете выделять и копировать текст без всяких ограничений (в редких случаях этот способ не работает).

Как выделить текст на сайте, который не выделяется, и скопировать его

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

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

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

Но факт остается фактом, такие интернет-ресурсы существуют, и будет полезно знать, как справляться с этой проблемой.

Как выделить и скопировать текст, защищённый от копирования

Первый способ, универсальный для всех интернет-браузеров — это выделение и копирование содержимого веб-страницы через исходный код HTML. Чтобы для выбранной страницы открылся режим разметки HTML, используйте сочетание «Ctrl +U».

Будет открыта вкладка с HTML-кодом. Теперь среди HTML-тегов надо найти то, что вы решили сохранить. Поможет поиск. Для этого используйте клавиши «Ctrl+F» или F3. Сверху появится окошко для поиска.

Когда нужные фразы будут найдены, сделайте выделение, удерживая левую кнопку мыши, и скопируйте в любой текстовый редактор, используя правую кнопку мыши «копировать» и «вставить» или «быстрые кнопки»: «Ctrl+C» и «Ctrl+V».

Неудобство этого метода состоит в том, что вместе с текстовым содержимым выделяется и копируется также и HTML-код. Скопированный файл потом придётся «чистить» от ненужных символов.

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

Google Chrome и Opera. В этих браузерах надо воспользоваться функцией «Печать». Для этого нажмите на клавиатуре «Ctrl+P» или откройте «Печать» через меню управления. В Google Chrome панель управления открывается, если нажать на три точки в правом верхнем углу браузера.

В Opera «Печать» находится на вкладке «Меню» в верхнем левом углу. На этой вкладке можно задавать параметры печати с предпросмотром выбранной интернет-страницы.

Для наших целей интересно окно предпросмотра, теперь нужная часть текста там может быть выделена и скопирована. Нажимая на «+» или «-» можно настроить желаемый размер шрифта. Для возврата к обычному виду веб-страницы нажмите «Отмена».

Internet Explorer и Mozilla Firefox. В этих браузерах существует функция «Режим чтения». Значок для перехода в «Режим чтения» находится в адресной строке справа.

Когда страница будет открыта для чтения, будет возможность выделять и копировать требуемые фрагменты. Но этот вариант просмотра доступен не для всех интернет-страниц, а только для статических со статьями.

Третий способ очень простой. Это использование «виртуального принтера». Скопируйте адрес страницы, откройте онлайн-принтер printfriendly точка com/ и пропишите адрес в специальной строке.

Нажмите «Print preview». Откроется страница предварительного просмотра. Здесь уже возможно выделять текстовые фрагменты и, если требуется, копировать на свой компьютер.

Давайте немного подытожим, мы можем выделять текст, при помощи:

  • Через исходный код.
  • Встроенные функции вашего браузера.
  • Через виртуальный принтер.

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

Выделение и CSS

Навык выделения текста и других объектов сформировался у пользователей компьютеров много лет назад. Мы выделяем содержимое веб-страниц по разным причинам. Возможно, нужно скопировать текст и где-то его процитировать, возможно — кому-то просто легче читать текст, выделяя его фрагменты. На мобильных устройствах, правда, выделять что-либо сложнее. Меня, например, это раздражает. Мне не нравится выделять содержимое веб-страниц на телефоне. Эта операция кажется какой-то «неправильной».

В этом материале я расскажу обо всём, что нужно знать о стилизации выделений средствами CSS. В частности, речь пойдёт о псевдоэлементе ::selection и о свойстве user-select . Эта статья направлена на то, чтобы показать всем желающим возможности CSS по работе с выделениями, и на то, чтобы рассказать о том, когда и как использовать разные методы работы с выделениями.

Основы

На MDN можно узнать о том, что псевдоэлемент ::selection позволяет применить стили к части документа, который был выделен пользователем (например, с помощью мыши).

Для использования ::selection достаточно воспользоваться следующей конструкцией:

p::selection

Выделенный текст

Вот пример, с которым можно поэкспериментировать.

Свойства, поддерживаемые ::selection

Стоить отметить, что псевдоэлемент ::selection поддерживает только свойства color , background и text-shadow .

Настройка собственных эффектов выделения

Что если нам нужно, чтобы выделение выглядело бы по-особенному? Например, чтобы выделение имело бы определённую высоту или некий интересный фон? Взгляните на следующий рисунок.

Пример особой настройки выделения

Это возможно, хотя и потребует приложения некоторых усилий. Вот как сделано выделение, показанное выше:

  • Добавлен псевдоэлемент, с тем же текстом, который мы выделяем. Затем псевдоэлементу задано свойство height: 50% и белый фоновый цвет.
  • Псевдоэлемент расположен над исходным текстом.
p < position: relative; color: #fff; >p:after < content: attr(data-content); position: absolute; color: #000; top: 0; left: 0; width: 100%; height: 50%; background-color: #fff; >p::selection

Об этой методике я узнал здесь.

Ещё один вариант подобного выделения представлен ниже. Здесь я, вместо сплошного выделения, реализовал выделение в виде CSS-градиента. Смысл тут заключается в использовании белого градиента с высотой в 50% и в однократном заполнении элемента фоновым рисунком благодаря использованию значения no-repeat при настройке свойства background .

h1:after < content: attr(data-content); position: absolute; color: #000; top: 0; left: 0; width: 100%; background: linear-gradient(#fff, #fff) top/100% 50% no-repeat; >

На следующем рисунке показано разъяснение этой методики.

Реализация градиентного выделения

Надеюсь, я смог понятно объяснить эту идею. Вот рабочий пример.

Анимирование выделения

Работая над предыдущим примером, я задался следующим вопросом: «Реально ли анимировать выделение?». Например, в процессе выделения текста высота выделения составляет 50%. А когда указатель мыши уводят в сторону, высота выделения увеличивается до 80%. Как это сделать? А вот так:

p < transition: background 0.3s ease-out; >p:hover:after

Текст в процессе выделения

Текст после завершения выделения

Вот видео, в котором демонстрируется анимированное выделение.

Многострочный текст

Представленная выше методика настройки выделения, к сожалению, не подходит для многострочного текста. Для того чтобы, всё же, реализовать нечто подобное и для такого текста, нужно прибегнуть к возможностям JavaScript и поместить каждое слово во встроенный (строчный) элемент, например — в . После того, как каждое слово окажется в собственном элементе , к каждому из таких элементов надо добавить псевдоэлемент. А уже после этого к многострочному тексту можно применить вышеописанный эффект.

Вот скрипт, позволяющий поместить каждое слово в -контейнер:

let paragraph = document.querySelector(".text"); const words = paragraph.textContent.split(" "); paragraph.innerHTML = ""; words.forEach(function (word) < let wordItem = document.createElement("span"); wordItem.setAttribute("data-word", word); wordItem.innerHTML = word + " "; paragraph.appendChild(wordItem); >); 

После этого элементы надо стилизовать. Затем к каждому из них надо добавить псевдоэлемент:

span < position: relative; font-size: 1.25rem; line-height: 1.4; >span::after < content: attr(data-word); position: absolute; left: 0; right: 0; top: -0.28em; height: 75%; padding-top: 0.14em; background: #fff; pointer-events: none; >span::selection

Если посмотреть на эту конструкцию в деле, то окажется, что она работает, но не совсем так, как можно ожидать. Ниже показан пример выделения многострочного текста. Можно заметить, что выделение выглядит неоднородным.

Неоднородное выделение

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

Тут с таким выделением можно поэкспериментировать.

Креативный подход к использованию ::selection и text-shadow

Так как одним из свойств, которые поддерживает псевдоэлемент ::selection , является text-shadow , мы можем попытаться достичь каких-нибудь интересных эффектов, используя несколько теней текста. Исследуем возможности, которые открывает перед нами эта идея.

▍Выделение с длинными тенями

Выделенный текст отбрасывает длинные тени

Вот как реализовать этот эффект:

p::selection

▍Эффект контурного текста

Выделенный текст становится контурным

Эту идею я нашёл в данной статье. Речь идёт о том, что с помощью свойства text-shadow можно сымитировать эффект контурного текста.

p::selection

▍Эффект размытия

Выделенный текст выглядит размытым

Ещё один интересный эффект, который можно применить к выделенному тексту, заключается в размытии этого текста. Суть тут в том, чтобы использовать при настройке цвета текста свойство color: transparent . Тени, задаваемые с помощью text-shadow , при этом никуда не исчезнут, что и даст нужный эффект.

p::selection

Уверен, что вы сами сможете придумать ещё очень много примеров применения text-shadow для стилизации выделений. Это свойство даёт нам безграничные возможности.

▍Тени текстов и производительность

Не рекомендуется использовать слишком сложные стили при настройке text-shadow . Дело в том, что чрезмерное увлечение этим свойством приводит к проблемам с производительностью. Вот видео, демонстрирующее один из примеров таких проблем.

Использование очень сложных стилей при настройке выделения текста

Представленный здесь неоновый эффект очень сложен. Обратите внимание на то, что при выделении этого текста заметна задержка между моментом выделения текста и моментом применения стилизации. Кроме того, обратите внимание на то, что сверху и слева появляется то, что появляться не должно. Поэтому прошу вас использовать text-shadow осмотрительно.

Выделяются ли элементы форм?

Краткий ответ на вопрос, вынесенный в заголовок этого раздела, будет звучать как «да». Мне кажется, что это неправильно: выделяешь страницу, а оказывается, что содержимое внутри полей ввода тоже выделяется. Вот как это выглядит.

Содержимое внутри полей ввода выделяется

Тут может быть выделен и текст внутри кнопки. В разделе, посвящённом user-select , мы поговорим о том, стоит или нет позволять пользователям выделять формы элементов.

Исследование свойства user-select

Свойство user-select даёт нам возможность задавать возможность выделения конкретного текста пользователем. Это свойство может оказаться полезным для отключения возможности выделения текста, что может пригодиться для ограничения возможностей пользователя по выделению материалов, расположенных рядом друг с другом. Вот стандарт, описывающий user-select .

Это свойство может принимать следующие значения: none, auto, text, contain, all .

Сценарии использования user-select

▍Текст и иконка

Если в элементе есть текст и иконка — в виде символа или значка, взятого из какого-нибудь шрифта, то при выделении текста будет выделяться и эта иконка. Рассмотрим пример, представленный на следующем рисунке.

Кнопка с текстом и иконкой

Вот код этой кнопки:

 

При выделении этого элемента он выглядит так, как показано ниже.

Выделенная кнопка

В подобном совершенно нет необходимости. Обратите внимание на то, что в разметке используется атрибут aria-hidden , скрывающий иконку от средств чтения с экрана. Для того чтобы решить проблему с выделение того, что выделять не нужно, мы можем воспользоваться следующим стилем:

button span[aria-hidden="true"]

Это позволяет запретить выделение иконки. И, в то же время, мы привязываем запрет выделения к атрибуту aria-hidden . В результате всё, что не должно выделяться, скорее всего, не должно быть видимым и для средств чтения с экрана.

▍Флажки

Меня раздражает такое поведение флажков, когда, устанавливая или снимая флажок, я случайно выделяю текст его описания. Вот как это выглядит.

Текст описания флажка выделен случайно

Решить эту проблему можно, стилизовав элемент следующим образом:

label

▍Выделение всего текста

Значение all , которое может принимать свойство user-select , позволяет добиваться интересного эффекта. Если это свойство с таким значением есть у родительского элемента, то весь текст, содержащийся в таком элементе, можно выделить одним щелчком мыши. Это может оказаться полезным для работы с текстовым содержимым, которое должно выделяться целиком. Например — для выделения фрагментов кода, имеющихся на странице:

.embed-code

Фрагмент текста, оформленный таким стилем, можно выделить одним щелчком мыши по нему.

Веб-приложения

Веб-приложение должно восприниматься пользователем как настоящее приложение. Можно ли выделять текст кнопок в обычных приложениях? Нет, нельзя. Важно, чтобы веб-приложения отражали привычные черты обычных приложений, делая это даже с учётом того, что они созданы с использованием HTML и CSS.

Рассмотрим несколько примеров из жизни.

▍Slack

В Slack можно выделять метки и поля ввода. Однако тексты кнопок не выделяются.

Подписи кнопок не выделяются

Вот ещё один пример.

Подпись в заголовке модального окна выделяется

А дату чата выделить нельзя.

Дату выделить нельзя

В целом — мне кажется странным то, что в приложении можно выделять некоторые тексты, которые, вроде бы, не должны поддерживать выделение. В интерфейсе Slack есть места, где используется user-select: none , но таких мест меньше, чем можно ожидать. Например мне, как пользователю, нет никакой выгоды от выделения заголовка модального окна.

▍Notion

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

То, что не должно выделяться, не выделяется

Ни один фрагмент текста с этого рисунка не выделяется. Это — именно то, чего можно ожидать от приложения.

Не используйте глобальное отключение выделения

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

.disable-selection

Нехороший паттерн

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

Запрет выделения с показом уведомления

Пожалуйста, не делайте так.

Выделение на мобильных устройствах

Существует свойство -webkit-touch-callout для iOS Safari, которое должно отключать показ стандартной подсказки, выводимой при выделении текста. Я попытался воспользоваться этим свойством, но оно не работает.

Стили ::selection тоже не работают.

А свойство user-select: none работает так, как ожидается.

Я постарался найти реальный пример, иллюстрирующий эту проблему. Я скопировал фрагмент текста из Википедии. При этом был скопирован и совершенно ненужный мне текст (listen) . Это раздражает.

Вместе с полезным текстом скопировано и (listen)

Вместо того чтобы позволять пользователю копировать это вот «listen», лучше было бы добавить к этому элементу стиль user-select: none . В результате при копировании текста, содержащего этот элемент, он копироваться не будет.

Итоги

Здесь мы рассмотрели методы настройки выделения элементов веб-страниц с использованием средств CSS. Возможно, вам интересно будет взглянуть и на этот материал.

Уважаемые читатели! Как вы настраиваете выделение текстов в своих проектах?

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *