Мышь: отмена выделения, невыделяемые элементы
Материал на этой странице устарел, поэтому скрыт из оглавления сайта.
Более новая информация по этой теме находится на странице https://learn.javascript.ru/selection-range.
У кликов мыши есть неприятная особенность.
Двойной клик или нажатие с движением курсора как правило инициируют выделение текста.
Если мы хотим обрабатывать эти события сами, то такое выделение – некрасиво и неудобно. В этой главе мы рассмотрим основные способы, как делать элемент невыделяемым.
Для полноты картины, среди них будут и такие, которые применимы не только к событиям мыши.
Способ 1: отмена mousedown/selectstart
Если сделать двойной клик на таком элементе, то обработчик сработает. Но побочным эффектом является выделение текста браузером.
Чтобы избежать выделения, мы должны предотвратить действие браузера по умолчанию для события selectstart в IE и mousedown в других браузерах.
Полный код элемента, который обрабатывает двойной клик без выделения:
При установке на родителя – все его потомки станут невыделяемыми:
Отмена действия браузера при mousedown/selectstart отменяет выделение при клике, но не запрещает его полностью.
Если пользователь всё же хочет выделить текстовое содержимое элемента, то он может сделать это.
Достаточно начать выделение (зажать кнопку мыши) не на самом элементе, а рядом с ним. Ведь там отмены не произойдёт, выделение начнётся, и дальше можно передвинуть мышь уже на элемент.
Способ 2: снятие выделения постфактум
Вместо предотвращения выделения, можно его снять в обработчике события, после того, как оно уже произошло.
Пример со снятием выделения при двойном клике на элемент списка:
У этого подхода есть две особенности, на которые стоит обратить внимание:
Способ 3: свойство user-select
Оно когда-то планировалось в стандарте CSS3, потом от него отказались, но поддержка в браузерах уже была сделана и потому осталась.
Это свойство работает (с префиксом) везде, кроме IE9-:
IE9-: атрибут unselectable=«on»
Он отменяет выделение, но у него есть особенности:
Итого
Для отмены выделения есть несколько способов:
CSS-свойство user-select – везде кроме IE9- (нужен префикс, нестандарт).
Атрибут unselectable=»on» – работает для любых IE (должен быть у всех потомков)
Отмена действий на mousedown и selectstart :
Какой же способ выбирать?
Это зависит от задач и вашего удобства, а также конкретного случая. Все описанные способы работают.
Недостаток user-select – в том, что посетитель теряет возможность скопировать текст. А что, если он захочет именно это сделать?
В любом случае эти способы не предназначены для защиты от выделения-и-копирования.
Если уж хочется запретить копирование – можно использовать событие oncopy :
Как сделать так чтобы текст нельзя было выделить html
Программирование на C++ с Нуля до Гуру
Данный курс научит Вас программировать на языке C++, который, несмотря на свой почтенный возраст, необычайно сильно востребован. Курс состоит из 6 разделов, посмотрев которые и выполнив все упражнения, Вы с нуля освоите этот язык и сможете создавать самые разные проекты любой сложности на C++.
Для закрепления материала из уроков к ним идёт множество упражнений.
Дополнительно к курсу идёт вспомогательная система, которая не даст Вам забросить начатое на полпути.
Также вместе с курсов Вы получаете Бонус «Программирование на C++ в Unreal Engine», в котором Вы научитесь создавать игры на C++ с использованием этого движка.
Подпишитесь на мой канал на YouTube, где я регулярно публикую новые видео.
Подписавшись по E-mail, Вы будете получать уведомления о новых статьях.
Добавляйтесь ко мне в друзья ВКонтакте! Отзывы о сайте и обо мне оставляйте в моей группе.
Зачем Вы изучаете программирование/создание сайтов?
Создание мультиплеерной игры на Unreal Engine 4
В этом курсе Вы увидите пример создания мультиплеерной игры на Unreal Engine 4: создание персонажа, HUD, атака, блокировка, главное меню и многое другое.
Чтобы получить Видеокурс,
заполните форму
Как создать профессиональный Интернет-магазин
— Вы будете знать, как создать Интернет-магазин.
— Вы получите бесплатный подарок с подробным описанием каждого шага.
— Вы сможете уже приступить к созданию Интернет-магазина.
Управление выделением элементов на сайте при помощи CSS спецификации user-select
При верстке многих элементов часто появляется необходимость снять возможность их выделения. Иначе красиво оформленная кнопка изменяется визуально при случайном выделении.
Управлять выделением можно при помощи CSS спецификации user-select.
Управление выделением текста на странице при помощи user-select
Разберем несколько вариантов выделения. В первом варианте нам нужно сделать так, чтобы текст нельзя было выделить.
Для этого создадим абзац с текстом и добавим в него спецификацию user-select со значением none.
Этот текст невозможно выделить как при помощи мыши так и при помощи клавиатуры
Второй вариант. Сделаем так, чтобы текст можно было выделить один нажатие и полностью.
Этот текст выделяется одним нажатием вместе с дочерними элементами.
Допустим у нас есть страница с текстом и изображениями. Нужно сделать так, чтобы мы могли выделить только текст без изображений.
В этом тексте находится изображение 
и при выделении текста изображение не выделяется.
Управление выделением других элементов
Если у вас есть кнопка, например, в
Получается, что для любого элемента на HTML странице прописав спецификацию user-select мы можем управлять выделением.
Запрет вызова контектсного меню
Далеко не секрет, что если вы запретили выделение текста, то можно вызвать контектсное меню и через него обойти этот запрет. Поэтому идеальным решением будет запрет вызова контектсного меню. Это можно сделать с помоью jаvascript события «oncontextmenu=»return false;».
Выше также прописаны параметры user-select для браузера Mozilla и Chrome.
Таким образом, испозльуя CSS спецификацию user-select и событие jаvascript можно защитить свой контент от копирования. Но помните, что это решение не является идеальным и несложно обходится через панель разработчика. В крайнем случае можно просто сделать скриншот вашего текста и потом распознать его.
Использование CSS для управления выделением текста
CSS позволяет управлять, поведением и внешним видом выделенного текста на страницах HTML-документа. Это может помочь улучшить юзабилити в определенных ситуациях и добавить немного визуального чутья.
Выделить всё
Иногда бывает полезно, чтобы весь текст в элементе автоматически выделялся при нажатии на него. Это особенно удобно для текста, который копируется/вставляется полностью (фрагменты кода, одноразовые пароли, промокоды и т.д.).
Это можно сделать с помощью только простого CSS и без какого-либо JavaScript!
Выделить всё… Затем выделить часть
Хотя это работает должным образом, можно заметить кое-что неприятное: невозможно выбрать что-то отдельное, кроме всего фрагмента кода. Хорошо бы первым кликом выбрать всё, но оставить возможность кликнуть ещё раз и выбрать только часть. Это можно сделать, всё ещё, с помощью только CSS.
Теперь немного CSS.
Предотвращение выделения текста
CSS можно использовать ещё и для того, чтобы сделать текст в элементе недоступным для выбора, т.е. запретить выделение текста.
Это плохая идея для основного текста, но будет полезно для элементов управления, которые можно быстро переключать или «гневно щелкать» в настольных браузерах, поскольку двойной щелчок вызывает выбор текста и подсветку его выделения — выглядеть немного странно и дико.
Проверить можно в следующей демонстрации. Обратите внимание, как переключатель слева становится подсвеченным при быстром нажатии, а переключатель справа — нет.
Этот метод также работает с виджетами раскрытия содержимого (HTML-элемент details ) или фальшивыми кнопками — например,
Выборочное выделение текста
Невыделяемый текст можно смешивать с выделяемым текстом. Невыделяемые части просто пропускаются при выборе текста и будут пропущены при копировании/вставке выделения.
В примере ниже используется user-select: none на числовых маркерах сносок. Поэтому, когда выделенное копируется/вставляется, маркеры автоматически удаляются.
Но это работает не во всех браузерах. Safari (iOS и компьютер) и Android Chrome по-прежнему будут копировать маркеры.
Стилизация выделения
Вот пример стилизации выделенного текста в HTML-элементе
Чтобы увидеть результат, выделяйте текст в примере ниже.
Немного особенностей
. Однако, IE11 был последним браузером, который поддерживал это. В настоящее время значение contain не поддерживают все современные браузеры.
Тем не менее, все редактируемые элементы (такие как
Всё вышенаписанное было про CSS, но всё-таки стоит упомянуть JavaScript в контексте выделения текста и копипасты.
Если нужен полный контроль над выделением текста, пригодится JavaScript Selection API. Если конечной целью является копирование/вставка текста, то JavaScript позволяет взаимодействовать с буфером обмена.
Как запретить копирование с сайта с помощью CSS
Ранее были рассмотрены два варианта того, как запретить копирование контекста с сайта: с помощью JavaScript (легко обходится отключением JS в браузере) и с помощью прозрачного блока CSS на весь экран, который перекрывает доступ до элементов страницы (легко обходится, удалением этого элемента со страницы с помощью инструментов разработчика браузера). В этой статье расскажу про ещё один способ того, как усложнить жизнь тем, кто ворует чужой контент с помощью CSS свойства user-select и на этом пожалуй остановлюсь. Нет идеальной защиты. На крайней случай, можно всегда нанять секретаршу, которая всё перепечатает (если конечно нет нормального сисадмина, разбирающегося в том, как работают сайты, в штате).
CSS свойство user-select что оно умеет и для чего предназначено
CSS свойство user-select управляет поведением выделения текста и других элементов на странице, в частности, позволяет запретить выделение текста. Нормальным применением этого свойства будет запретить выделение текста на тех элементах страницы, которые служат указателями, например, в панели вкладок на странице с аккордеоном. Этого же можно добиться, заменив текст картинками, но зачем усложнять и утяжелять страницу? CSS свойство user-select не влияет на поведение поисковых роботов, поэтому его также применяют на сайтах для обеспечения защиты текста от копирования.
Сделать это можно так:
Как обойти блокировку копирования CSS свойством user-select
Как разрешить копировать лишь часть контента
Для того, чтобы можно было хоть что-то скопировать, можно задать дополнительный CSS-класс, в котором отключить запрет на выделение:
Тогда, можно управлять тем, что поддаётся выделению (и копированию) и тем, что стандартными средствами выделить в браузере не получится (даже при отключенном в браузере JavaScript). Например,
Выводы
Таким образом с помощью CSS свойства user-select можно дополнительно усложнить жизнь тем, кто ворует контент и защитить сайт от копирования текста, но решения о том, как развидеть то, что уже показано на мониторе пользователя просто не существует. Если показали, — значит дали шанс использовать. А уж как поведёт себя пользователь с полученной информацией, предсказать невозможно.
