Выделить при нажатии css

Выделение текста для копирования CSS

Если скопировать выделенный текст вместе с изображением , то вместо картинки будет содержимое её атрибута alt . Само изображение можно сохранить отдельно от текста. Щелчок по картинке не выделит текст всего элемента.

  
Если скопировать выделенный текст вместе с изображением  src="//4.bp.blogspot.com/-eJraU5lCufs/UFa8PpMUv8I/AAAAAAAADLQ/Y5SGHBd91-Q/s00/smail-bolshoi-palets-vverh.gif" alt="Смайлик «Большой палец вверх»" height="104" width="147" title="Отлично!"/>, то вместо картинки будет содержимое её атрибута alt. Само изображение можно сохранить отдельно от текста. Щелчок по картинке не выделит текст всего элемента.

  
Текст будет скопирован без картинки  src="//4.bp.blogspot.com/-eJraU5lCufs/UFa8PpMUv8I/AAAAAAAADLQ/Y5SGHBd91-Q/s00/smail-bolshoi-palets-vverh.gif" alt="Смайлик «Большой палец вверх»" height="104" width="147" title="Отлично!"/>. Само изображение можно сохранить отдельно от текста. Щелчок по картинке не выделит текст всего элемента.

  contenteditable --> 
contenteditable>Изменить меня с user-select: auto;
 
contenteditable>Изменить меня с user-select: all;
 
contenteditable>Изменить меня с user-select: none;

Активные псевдоэлементы ::before и ::after

  
Нельзя выделить и скопировать содержимое псевдоэлементов.

Источник

Использование CSS для управления выделением текста

CSS позволяет управлять, поведением и внешним видом выделенного текста на страницах HTML-документа. Это может помочь улучшить юзабилити в определенных ситуациях и добавить немного визуального чутья.

Выделить всё

Иногда бывает полезно, чтобы весь текст в элементе автоматически выделялся при нажатии на него. Это особенно удобно для текста, который копируется/вставляется полностью (фрагменты кода, одноразовые пароли, промокоды и т.д.).

Это можно сделать с помощью только простого CSS и без какого-либо JavaScript!

Выделить всё… Затем выделить часть

Хотя это работает должным образом, можно заметить кое-что неприятное: невозможно выбрать что-то отдельное, кроме всего фрагмента кода. Хорошо бы первым кликом выбрать всё, но оставить возможность кликнуть ещё раз и выбрать только часть. Это можно сделать, всё ещё, с помощью только CSS.

Во-первых, надо использовать tabindex , чтобы сделать HTML-элемент, содержащий текст, доступным для фокусировки. Это позволит CSS узнать о клике по HTML-элементу.

code < -webkit-user-select: all; user-select: all; >code:focus < animation: select 100ms step-end forwards; >@keyframes select < to < -webkit-user-select: text; user-select: text; >>

Идея состоит в том, чтобы сначала установить для HTML-элемента CSS-свойство user-select: all , а затем, когда фокус переместится на этот элемент, переключиться на «обычный» user-select: text , чтобы текст можно было выбирать по частям. Выбор времени переключения – дело непростое. Если сделать переключение сразу после перемещения фокуса на элемент, то от user-select: all не будет никакого эффекта, т.к. оно успеет сменить значение на text . Поможет решить проблему animation .

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

Предотвращение выделения текста

CSS можно использовать ещё и для того, чтобы сделать текст в элементе недоступным для выбора, т.е. запретить выделение текста.

Это плохая идея для основного текста, но будет полезно для элементов управления, которые можно быстро переключать или «гневно щелкать» в настольных браузерах, поскольку двойной щелчок вызывает выбор текста и подсветку его выделения – выглядеть немного странно и дико.

Проверить можно в следующей демонстрации. Обратите внимание, как переключатель слева становится подсвеченным при быстром нажатии, а переключатель справа – нет.

Этот метод также работает с виджетами раскрытия содержимого (HTML-элемент details ) или фальшивыми кнопками – например, с обработчиком кликов на нём. Правда, использование настоящего элемента предпочтительнее не только с точки зрения семантики и доступности, но и потому, что текст в такой кнопке по умолчанию не может быть выделен, а это позволяет избежать проблемы с самого начала.

Выборочное выделение текста

Невыделяемый текст можно смешивать с выделяемым текстом. Невыделяемые части просто пропускаются при выборе текста и будут пропущены при копировании/вставке выделения.

В примере ниже используется user-select: none на числовых маркерах сносок. Поэтому, когда выделенное копируется/вставляется, маркеры автоматически удаляются.

Но это работает не во всех браузерах. Safari (iOS и компьютер) и Android Chrome по-прежнему будут копировать маркеры.

Стилизация выделения

Стилизовать выделенный текст можно с помощью псевдоэлемента ::selection . Однако настройки ограничены тремя CSS-свойствами: color , background-color и text-shadow (в спецификации их больше, но всё портит поддержка свойств браузерами).

Вот пример стилизации выделенного текста в HTML-элементе

.

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

Немного особенностей

Есть еще одна декларация user-select: contain , которая должна ограничивать выделение текста внутри элемента, как это работает с . Однако, IE11 был последним браузером, который поддерживал это. В настоящее время значение contain не поддерживают все современные браузеры.

Тем не менее, все редактируемые элементы (такие как ) обрабатываются, как если бы они имели user-select: contain . Псевдоэлементы ::before и ::after нельзя выбрать, как если бы у них было установлено user-select: none . Изменить такое поведение не получится.

Всё вышенаписанное было про CSS, но всё-таки стоит упомянуть JavaScript в контексте выделения текста и копипасты.

Если нужен полный контроль над выделением текста, пригодится JavaScript Selection API. Если конечной целью является копирование/вставка текста, то JavaScript позволяет взаимодействовать с буфером обмена.

Источник

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

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

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

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

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

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

Этот текст невозможно выделить как при помощи мыши так и при помощи клавиатуры

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

Этот текст выделяется одним нажатием вместе с дочерними элементами.

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

В этом тексте находится изображение и при выделении текста изображение не выделяется.

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

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

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

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

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

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

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

Источник