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