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

Как сделать текст невыделяемым css

  • автор:

Управление выделением элементов на сайте при помощи CSS спецификации user-select

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

Управлять выделением можно при помощи CSS спецификации user-select.

Управление выделением текста на странице при помощи user-select

Разберем несколько вариантов выделения. В первом варианте нам нужно сделать так, чтобы текст нельзя было выделить.

Для этого создадим абзац с текстом и добавим в него спецификацию user-select со значением none.

Этот текст невозможно выделить как при помощи мыши так и при помощи клавиатуры

Второй вариант. Сделаем так, чтобы текст можно было выделить один нажатие и полностью.

Этот текст выделяется одним нажатием вместе с дочерними элементами.

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

В этом тексте находится изображение и при выделении текста изображение не выделяется.

Управление выделением других элементов

Если у вас есть кнопка, например, в контейнера и вы не хотите, чтобы она не выделялась вместе с текстом, при двойном нажатии на содержимое и другими возможными способами, то вы также можете использовать «user-select:none;».

Получается, что для любого элемента на HTML странице прописав спецификацию user-select мы можем управлять выделением.

Запрет вызова контектсного меню

Далеко не секрет, что если вы запретили выделение текста, то можно вызвать контектсное меню и через него обойти этот запрет. Поэтому идеальным решением будет запрет вызова контектсного меню. Это можно сделать с помоью jаvascript события «oncontextmenu=»return false;».

Выше также прописаны параметры user-select для браузера Mozilla и Chrome.

Таким образом, испозльуя CSS спецификацию user-select и событие jаvascript можно защитить свой контент от копирования. Но помните, что это решение не является идеальным и несложно обходится через панель разработчика. В крайнем случае можно просто сделать скриншот вашего текста и потом распознать его.

Создание невыделяемого текста в HTML: профессиональные методы

Если вы хотите сделать свой текст невозможным для выделения, то примените CSS-свойство user-select: none :

Скопировать код

.no-select < user-select: none; /* Стандартное свойство */ >

Затем, присвойте этот класс HTML-элементу, который вы хотите защитить от выделения:

Скопировать код

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

Нюансы: Совместимость с различными браузерами и другие аспекты

Свойство невыделяемости текста предотвратит его несанкционированное копирование, но прежде чем приступать к его использованию, стоит обдумать последствия. Запомните: с великой силой идут великие обязательства!

Работа в разных браузерах

Чтобы свойство user-select: none работало корректно даже в старых браузерах, добавьте к нему вендорные префиксы:

Сделать текст невыделяемым в HTML: CSS и JavaScript

Если хотите предотвратить выделение текста, воспользуйтесь CSS-свойством user-select: none :

Скопировать код

.unselectable < user-select: none; >/* Этот класс делает текст невыделяемым */

Затем добавьте этот класс нужным элементам в HTML:

Скопировать код

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

Совместимость и использование атрибута ‘unselectable’

CSS-метод достаточно надежен, но некоторые старые версии браузеров, например Internet Explorer, могут не поддерживать его. В этом случае используйте атрибут unselectable со значением «on», тогда текст станет невыделяемым:

Скопировать код

Даже старый IE не справится со мной.

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

Применение JavaScript для сложных случаев

Если при помощи CSS не удается сделать текст невыделяемым, на помощь придет JavaScript:

Скопировать код

function makeUnselectable(element) < if (element.nodeType === 1) < element.setAttribute("unselectable", "on"); // Декларируем элемент невыделяемым >var child = element.firstChild; while (child) < makeUnselectable(child); // Применяем рекурсивно ко всем потомкам child = child.nextSibling; >> makeUnselectable(document.getElementById('myElement')); // Активируем на выбранном элементе

Этот скрипт просматривает все потомки выбранного элемента и присваивает им атрибут невыделяемости.

Визуализация

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

Скопировать код

До: ['Привет', 'мир', '**Невидимый**', 'текст'] После: ['Привет', 'мир', '��✨', 'текст']

А CSS-класс работает подобно знаку «вход запрещён»: css .user-select-none < user-select: none; /* Ваш текст под охраной */ >Подведите нужные элементы под этот класс, чтобы их текст стал невыделяемым.

Практическое применение и потенциальные трудности

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

Поддержка разными браузерами

Чтобы обеспечить работу во всех браузерах, добавьте всемирно известные префиксы -moz-user-select и -webkit-user-select к свойству user-select :

Скопировать код

.no-select < -webkit-user-select: none; /* Для Safari */ -moz-user-select: none; /* Для Firefox */ user-select: none; /* Для всех остальных браузеров */ >

Детали при двойном клике

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

Указывайте авторство при использовании других скриптов

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

Полезные материалы

  1. user-select – CSS: Cascading Style Sheets | MDN — Глубокое погружение в свойство user-select .
  2. user-select | CSS-Tricks — Принципы работы и примеры применения свойства user-select .
  3. CSS user-select property — Практический контекст применения user-select .
  4. How to disable text selection highlighting – Stack Overflow — Разнообразие решений для предотвращения выделения текста.
  5. Can I use. Support tables for HTML5, CSS3, etc — Данные о поддержке user-select разными браузерами.

Как сделать текст невыделяемым на css

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

Первый способ, связанный с небольшим повышением нагрузки на сайт — это запрет на уровне jаvascript. Как его обойти? Любой опытный пользователь просто отключит jаvascript в браузере. И все, после этой процедуры текст можно выделять и копировать.

Но в данной статье мы рассмотрим второй и более современный способ. Он заключается в том, чтобы сделать текст невыделяемым на css.

Итак, для этого нам не нужно подключения jаvascript скриптов и т.п., а всего лишь вставка следующих спецификаций на css:

::selection < background: transparent; >::-moz-selection

В коде используется псевдоэлемент css ::selection, который позволяет указать стиль для выделяемого текста. Кроме стиля background можно использовать и другие, а именно: color и background-color.

Внимание! Для браузера MozillaFirefox используется псевдоэлемент ::-moz-selection.

Псевдоэлемент ::selection работае во всех современных браузерах и в Internet Explorer начиная с версии 9.0.

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

p::selection < background: transparent; >p::-moz-selection

Давайте рассмотрим полный код страницы с данным псевдоэлементом:



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


При попытке выделения этого текста визуально ничего не происходит.


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

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

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

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

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

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