Как запретить пользователю выделять текст в браузере

Если Вы веб-разработчик, то у вас, наверняка, возникала необходимость в том, чтобы запретить пользователю выделение текста. Оговоримся, что я не имею в виду полный запрет с целью защиты текста, а запрет на выделение всевозможных подписей, надписей и т.п., где выделение мешает работе интерфейса и пользователю (чаще всего при drag&drop или выделении текста при двойном клике).

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

Что же мы можем сделать? Рассмотрим, какие возможности борьбы с выделением текста предлагают нам браузеры.

Современные браузеры имеют довольно совершенный механизм, запрещающий выделение текста в любом виде. Делается это через CSS-свойство user-select со значение none, которое включили в CSS3. И дело в шляпе.

Поддержка браузерами свойства user-select

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

Исходный код этого примера:

<style>
    .select_none {
        -ms-user-select: none;
        -webkit-user-select: none;
        user-select: none;
        color: #c00;
    }
</style>
<p class="select_none">
    Воспользуемся свойством user-select, чтобы запретить пользователю выделять в браузере текст этого абзаца.
</p>

Обратите внимание на то, что если начать выделение выше защищенного абзаца (для наглядности его текст сделали красным), а закончить ниже, то наша защита всё равно сработает.

При нажатии клавиш Ctrl+A защищенный абзац останется невыделенным.

И попытка выделить в нем слово двойным кликом обречена на провал.

Смотрите также: Защита от копирования содержимого страницы