Материал

Как сделать текст невыделяемым на css
Программирование / CSS·

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

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

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

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

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

::selection {
   background: transparent;
}
::-moz-selection {
   background: transparent;
}

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

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

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

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

p::selection {
   background: transparent;
}
p::-moz-selection {
   background: transparent;
}

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

<html>
<head>
<title>Пример страницы с невыделяемым текстом</title>
<style>
p::selection {
   background: transparent;
}
p::-moz-selection {
   background: transparent;
}
</style>
</head>
<body>
<p>При попытке выделения этого текста визуально ничего не происходит.</p>
</body>
</html>

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

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

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

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

 

Поделиться в соц. сетях: