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

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

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

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

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

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

<p style="user-select:none;">Этот текст невозможно выделить как при помощи мыши так и при помощи клавиатуры</p>

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

<p style="user-select:all;">Этот текст выделяется одним нажатием вместе с дочерними элементами.</p>

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

<p>В этом тексте находится изображение <img src="image.jpg" style="user-select:none;"> и при выделении текста изображение не выделяется.</p>

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

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

<div style="cursor:pointer;background-color:blue;user-select:none;padding:7px;color:#ffffff;text-align:center;width:150px;">Кнопка</div>

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

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

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

<div oncontextmenu="return false;" style="user-select: none;-moz-user-select: none;-webkit-user-select: none">Этот текст нельзя выделить и при попытке вызова контектсного меню ничего не происходит.</div>

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

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