Как запретить выделение блока?

Question

[vlados096zver]

user-select: none; pointer-events: none сделают это для текста, но сам div скопируется если рядом будет еще какой текст и от него "провести" выдение
<div class="test">L</div>

Comments

[Rsa97]

А задача то в чём? Если хотите не дать пользователю скопировать текст из браузера, то показывайте его картинкой. Иначе нет никаких проблем открыть средства разработки и скопировать текст в них или отключить там вашу защиту.

[Refguser]

Rsa97, и даже с картинки можно скопипастить :)

[Rsa97]

Refguser, Можно, просто лишнюю минуту придётся потратить

[Павел Сайк]

1. Псевдоэлемент вместо текста — контент не в DOM, не копируется

.test {
  user-select: none;
}
.test::before {
  content: "L";
}

<div class="test"></div>

2. aria-hidden + пустой alt — если это декоративный символ:

<div class="test" aria-hidden="true">L</div>

Не влияет на копирование напрямую, но семантически помечает как «игнорировать».

[Natalia Baženova]

как же я ненавижу сайты, которые пытаются запретить копирование. При первой возможности они идут в игнор.

Answer 1

[Пума Тайланд]

Тут проверь сначала: user-select: none обычно и так не даёт тексту попасть в буфер обмена, даже если div визуально подсвечивается при протягивании. Попробуй выделить соседний текст, скопировать и вставить куда-нибудь — «L» там не окажется. Если всё же попадает (бывает в старых браузерах), можно вынести букву в псевдоэлемент: .test::before { content: "L"; } и оставить div пустым.

Comments

[vlados096zver]

Пума Тайланд текст и не попадает, попадает сам div. Когда пользователь вставляет его в едитор

[Hovhannes Varosyan]

vlados096zver, вам нужно для всей страницы или только для одного элемента?

[Пума Тайланд]

А, то есть div протаскивается при вставке в editor? Попробуй вариант с ::before — псевдоэлементы в clipboard не попадают.

Answer 2

[ImagineTables]

<div>
  <label for="button1">Button 1</label>
  <button id="button1">I am not inert</button>
</div>
<div inert>
  <label for="button2">Button 2</label>
  <button id="button2">I am inert</button>
</div>
<div>
  <label for="button3">Button 3</label>
  <button id="button3">I am not inert</button>
</div>

ФФ, Хром — нажимаю Ctrl + A, Ctrl + C, в буфере

Button 1
Button 3