КодSEOБлогИное

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

Запретить выделение и копирование текста

Нельзя выделить и скопировать.
<style>
div {
  user-select: none; /* когда функция копирования будет мешать, например, при нажатии на кнопку, но не поможет против плагиата */ 
}
</style>

<div>Нельзя выделить и скопировать.</div>

Запретить выделение изображения

Можно выделить картинку: Смайлик «Большой палец вверх»
Нельзя выделить картинку: Смайлик «Большой палец вверх» 
<style>
img:nth-of-type(2) {
  user-select: none; /* полезно в фотогалереях */ 
}
</style>

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

user-select

на усмотрение браузера:
  • для псевдо-элементов ::before и ::after используется none,
  • для редактируемого элемента используется contain,
  • иначе как у родителя в значении all или none,
  • иначе — text
невозможно выделение элемента, искл. JS-объект Selection
возможно выделение части/всего элемента
на момент написания статьи не поддерживается браузерами:
  • выделение, начатое в элементе, не должно распространиться за пределы этого элемента,
  • выделение, начатое за пределами элемента, не должно закончиться в этом элементе
возможно выделение всего элемента
auto
наследует значение родителя
auto
Выделить этот текст
<style>
div {
  user-select: auto; /* свойство user-select не наследуется, применяется ко всем элементам */ 
}
</style>

<div>Выделить этот текст</div>

Выделить весь блок одним щелчком мышки

Чтобы выделить всё предложение, нажми на любое слово.
<style>
div {
  user-select: all; /* применяется совместно со скриптом, позволяющим копировать текст по клику */
}
</style>

<div>Чтобы выделить всё предложение, нажми на любое слово.</div>
Чтобы выделить всё предложение, нажми меня.
<style>
div {
  user-select: all;
}
span {
  user-select: text;
}
</style>

<div><span>Чтобы выделить всё предложение</span>, <b>нажми меня.</b></div>
Если скопировать выделенный текст вместе с изображением Смайлик «Большой палец вверх», то вместо картинки будет содержимое её атрибута alt. Само изображение можно сохранить отдельно от текста. Щелчок по картинке не выделит текст всего элемента.
<style>
div {
  user-select: all;
}
</style>

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

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

Свойство user-select у редактируемых элементов, таких как input, textarea

<style>
input:nth-of-type(2) {
  user-select: all; /* на момент написания статьи не работает или делает это очень криво */
}
input:nth-of-type(3) {
  user-select: none; /* в Mozilla Firefox курсор мышки не устанавливается в середину поля для редактирования, его можно перемещать кнопками клавиатуры */
}
</style>

<input value="user-select: auto;"/>
<input value="user-select: all;"/>
<input value="user-select: none;"/>
Изменить меня с user-select: auto;
Изменить меня с user-select: all;
Изменить меня с user-select: none;
<style>
div:nth-of-type(2) {
  user-select: all; /* в Mozilla Firefox курсор мышки не устанавливается в середину поля для редактирования */
}
div:nth-of-type(3) {
  user-select: none; /* в Mozilla Firefox курсор мышки не устанавливается в середину поля для редактирования, его можно перемещать кнопками клавиатуры */
}
</style>

<!-- пользователь может изменять содержимое элемента с атрибутом contenteditable -->
<div contenteditable>Изменить меня с <code>user-select: auto;</code></div>
<div contenteditable>Изменить меня с <code>user-select: all;</code></div>
<div contenteditable>Изменить меня с <code>user-select: none;</code></div>

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

Нельзя выделить и скопировать содержимое псевдоэлементов.
<style>
div {
  user-select: all;
}
div::before {
  content: "::before ";
}
div::after {
  content: " ::after";
}
div::before,
div::after {
  color: red;
  user-select: text; /* на момент написания статьи не работает для ::before и ::after, но в теории возможно [w3.org] */
}
</style>

<div>Нельзя выделить и скопировать содержимое псевдоэлементов.</div>
◄▲►
Все комментарии