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

Пользователь

от karen.wisozk , в категории: JavaScript , год назад

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

Facebook Vk Ok Twitter LinkedIn Telegram Whatsapp

2 ответа

Пользователь

от enid , год назад

@karen.wisozk 

Вот несколько способов, которые можно использовать для запрета выделения текста в браузере с помощью JavaScript:

  1. С помощью CSS:


Можно применить стиль user-select к элементу, который должен быть не выделяемым. Значение none отключает выделение.

1
2
3
4
5
6
.non-selectable {
  -webkit-user-select: none; /* Safari */
  -moz-user-select: none; /* Firefox */
  -ms-user-select: none; /* IE10+/Edge */
  user-select: none; /* стандарт */
}


  1. С помощью JavaScript:


Можно использовать событие onselectstart для предотвращения выделения текста. Это событие происходит, когда пользователь начинает выделять текст.

1
2
3
<div onselectstart="return false;">
  Этот текст нельзя выделить
</div>


  1. С помощью обработчика события mousedown:


Можно отменить выделение при щелчке мыши на элементе. Это можно сделать, установив обработчик события mousedown и отменяя стандартное поведение браузера.

1
2
3
<div onmousedown="return false;">
  Этот текст нельзя выделить
</div>


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

Пользователь

от jett , 5 месяцев назад

@karen.wisozk 

Наиболее распространенный способ запрета выделения на JavaScript - это использование стиля CSS user-select: none:

1
element.style.userSelect = "none";


Вы можете применить этот стиль к нужному элементу. Например, чтобы запретить выделение текста во всем документе, вы можете использовать document.body:

1
document.body.style.userSelect = "none";


Если вы хотите предотвратить выделение только для конкретного элемента, вы можете назначить обработчик события mousedown, который будет отменять стандартное действие (preventDefault()) при клике на элементе:

1
2
3
element.addEventListener("mousedown", function(event) {
  event.preventDefault();
});


Также вы можете использовать атрибут onselectstart в HTML-разметке элемента:

1
2
3
<div onselectstart="return false;">
  Этот текст нельзя выделить
</div>


Обратите внимание, что запрет выделения с помощью JavaScript может быть преодолен пользователем с помощью инструментов разработчика или других способов.