Как сделать текст невыделяемым css
Как сделать текст невыделяемым css
Создание сайтов на Django
Данный курс научит Вас создавать сайты на очень мощном фреймворке – Django. Курс состоит из 9 разделов, в которых Вы с нуля освоите данный фреймворк на примере создания полноценного Интернет-магазина.
В рамках многочисленных упражнений Вы так же создадите свой собственный сайт, что даст Вам ту необходимую практику для закрепления материала, а также полноценную серьёзную работу для своего портфолио.
Помимо самого курса Вас ждёт ещё и бесплатный ценный Бонус: «Unit-тестирование сайта на Django». В этом Бонусе Вы узнаете, как можно написать автоматические тесты для проекта на Django. Это позволит находить оперативно ошибки, а также даст возможность в будущем добавлять новый функционал, не боясь что-то сломать в старом.
Подпишитесь на мой канал на YouTube, где я регулярно публикую новые видео.
Подписавшись по E-mail, Вы будете получать уведомления о новых статьях.
Добавляйтесь ко мне в друзья ВКонтакте! Отзывы о сайте и обо мне оставляйте в моей группе.
Зачем Вы изучаете программирование/создание сайтов?
Написание лайфхаков на Python для начинающих
Данный курс покажет Вам, как можно автоматизировать рутинные задачи с помощью Python. В курсе Вас ждёт несколько примеров и все исходники.
Чтобы получить Видеокурс,
заполните форму
Как создать профессиональный Интернет-магазин
— Вы будете знать, как создать Интернет-магазин.
— Вы получите бесплатный подарок с подробным описанием каждого шага.
— Вы сможете уже приступить к созданию Интернет-магазина.
Как сделать так чтобы текст не выделялся css
Как сделать текст невыделяемым на css
Многие разработчики, дабы защитить свои материалы и публикации на сайте используют различные способы защиты. Самый простой их них — это сделать так, чтобы текст на странице сайта нельзя было выделить ни при помощи мыши, ни при помощи клавиатуры. Как это можно реализовать?
Первый способ, связанный с небольшим повышением нагрузки на сайт — это запрет на уровне jаvascript. Как его обойти? Любой опытный пользователь просто отключит jаvascript в браузере. И все, после этой процедуры текст можно выделять и копировать.
Но в данной статье мы рассмотрим второй и более современный способ. Он заключается в том, чтобы сделать текст невыделяемым на css.
Итак, для этого нам не нужно подключения jаvascript скриптов и т.п., а всего лишь вставка следующих спецификаций на css:
В коде используется псевдоэлемент css ::selection, который позволяет указать стиль для выделяемого текста. Кроме стиля background можно использовать и другие, а именно: color и background-color.
Внимание! Для браузера MozillaFirefox используется псевдоэлемент ::-moz-selection.
Псевдоэлемент ::selection работае во всех современных браузерах и в Internet Explorer начиная с версии 9.0.
В коде мы указали запрет на выделение текста для всего текста. Если это нужно сделать для абзаца, то указанный выше код изменится.
Давайте рассмотрим полный код страницы с данным псевдоэлементом:
Пример страницы с невыделяемым текстом
При попытке выделения этого текста визуально ничего не происходит.
Мышь: отмена выделения, невыделяемые элементы
Материал на этой странице устарел, поэтому скрыт из оглавления сайта.
Более новая информация по этой теме находится на странице 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 :
css как сделать чтобы текст не выделялся
Материал на этой странице устарел, поэтому скрыт из оглавления сайта.
Более новая информация по этой теме находится на странице 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 :
Многие разработчики, дабы защитить свои материалы и публикации на сайте используют различные способы защиты. Самый простой их них — это сделать так, чтобы текст на странице сайта нельзя было выделить ни при помощи мыши, ни при помощи клавиатуры. Как это можно реализовать?
Первый способ, связанный с небольшим повышением нагрузки на сайт — это запрет на уровне jаvascript. Как его обойти? Любой опытный пользователь просто отключит jаvascript в браузере. И все, после этой процедуры текст можно выделять и копировать.
Но в данной статье мы рассмотрим второй и более современный способ. Он заключается в том, чтобы сделать текст невыделяемым на css.
Итак, для этого нам не нужно подключения jаvascript скриптов и т.п., а всего лишь вставка следующих спецификаций на css:
В коде используется псевдоэлемент css ::selection, который позволяет указать стиль для выделяемого текста. Кроме стиля background можно использовать и другие, а именно: color и background-color.
Внимание! Для браузера MozillaFirefox используется псевдоэлемент ::-moz-selection.
Псевдоэлемент ::selection работае во всех современных браузерах и в Internet Explorer начиная с версии 9.0.
В коде мы указали запрет на выделение текста для всего текста. Если это нужно сделать для абзаца, то указанный выше код изменится.
Давайте рассмотрим полный код страницы с данным псевдоэлементом:
Пример страницы с невыделяемым текстом
При попытке выделения этого текста визуально ничего не происходит.
4 ответа 4
Всё ещё ищете ответ? Посмотрите другие вопросы с метками html css javascript или задайте свой вопрос.
Похожие
Для подписки на ленту скопируйте и вставьте эту ссылку в вашу программу для чтения RSS.
дизайн сайта / логотип © 2019 Stack Exchange Inc; пользовательское содержимое попадает под действие лицензии cc by-sa 4.0 с указанием ссылки на источник. rev 2019.11.15.35459
Как отключить выделение текста css
Как сделать текст невыделяемым на css
Многие разработчики, дабы защитить свои материалы и публикации на сайте используют различные способы защиты. Самый простой их них — это сделать так, чтобы текст на странице сайта нельзя было выделить ни при помощи мыши, ни при помощи клавиатуры. Как это можно реализовать?
Первый способ, связанный с небольшим повышением нагрузки на сайт — это запрет на уровне jаvascript. Как его обойти? Любой опытный пользователь просто отключит jаvascript в браузере. И все, после этой процедуры текст можно выделять и копировать.
Но в данной статье мы рассмотрим второй и более современный способ. Он заключается в том, чтобы сделать текст невыделяемым на css.
Итак, для этого нам не нужно подключения jаvascript скриптов и т.п., а всего лишь вставка следующих спецификаций на css:
В коде используется псевдоэлемент css ::selection, который позволяет указать стиль для выделяемого текста. Кроме стиля background можно использовать и другие, а именно: color и background-color.
Внимание! Для браузера MozillaFirefox используется псевдоэлемент ::-moz-selection.
Псевдоэлемент ::selection работае во всех современных браузерах и в Internet Explorer начиная с версии 9.0.
В коде мы указали запрет на выделение текста для всего текста. Если это нужно сделать для абзаца, то указанный выше код изменится.
Давайте рассмотрим полный код страницы с данным псевдоэлементом:
Пример страницы с невыделяемым текстом
При попытке выделения этого текста визуально ничего не происходит.