JS властивість CSSStyleDeclaration.userSelect

Загальний опис

element.style.userSelect - це властивість CSS, яку можна використовувати через JavaScript для контролю можливості користувача виділяти текст всередині HTML-елемента. Властивість userSelect дозволяє запобігати або дозволяти виділення тексту, що може бути корисним для різних випадків використання, таких як запобігання копіюванню контенту або покращення взаємодії з користувачем на веб-сторінках.

Значення цієї властивості можуть бути наступними: none, auto, text, all, contain. Значення none забороняє будь-яке виділення тексту всередині елемента. Значення auto дозволяє браузеру визначати, чи можна виділяти текст. Значення text дозволяє виділення лише тексту. Значення all дозволяє виділення всього вмісту елемента одним клацанням. Значення contain обмежує виділення лише межами елемента.

Розглянемо декілька прикладів використання властивості userSelect через JavaScript.

Приклад 1: Запобігання виділенню тексту у певному елементі. Це може бути корисним, коли ви хочете запобігти копіюванню контенту або перешкодити випадковому виділенню тексту під час інтерактивної взаємодії з елементом.

var element = document.getElementById('noSelectElement');
element.style.userSelect = 'none';

У цьому прикладі текст всередині елемента з id noSelectElement не може бути виділений користувачем.

Приклад 2: Дозволити виділення всього вмісту елемента одним клацанням. Це може бути корисним для елементів, які містять важливу інформацію, яку користувачам може знадобитися скопіювати.

var element = document.getElementById('selectAllElement');
element.style.userSelect = 'all';

У цьому прикладі весь вміст елемента з id selectAllElement може бути виділений одним клацанням миші.

Приклад 3: Обмеження виділення тексту лише межами елемента. Це може бути корисним для елементів, які містять текст, що не повинен впливати на навколишній текст при виділенні.

var element = document.getElementById('containSelectElement');
element.style.userSelect = 'contain';

У цьому прикладі текст всередині елемента з id containSelectElement може бути виділений, але виділення обмежено межами цього елемента.

Використання властивості userSelect допомагає краще контролювати взаємодію користувачів з текстом на веб-сторінці, дозволяючи або забороняючи виділення вмісту залежно від потреб вашого додатку. Це особливо важливо для покращення користувацького досвіду та захисту контенту від небажаного копіювання.

правити

Порада

Якщо у вас є складені елементи, що містять вкладені елементи з різними потребами у виділенні тексту, використовуйте userSelect на кожному вкладеному елементі окремо. Це дозволить точно контролювати, де можна виділяти текст, а де це заборонено, що може бути важливо для складних інтерфейсів користувача.

автор: Bond правити

Порада

Якщо у вас є специфічні елементи, такі як кнопки або інші інтерактивні елементи, де виділення тексту небажане, використовуйте userSelect разом з подіями миші для покращення взаємодії користувача. Це дозволить уникнути випадкового виділення тексту під час натискання кнопок і покращить користувацький досвід.

автор: Bond правити

Порада

Для забезпечення кращої доступності вашого веб-сайту, переконайтеся, що ви не випадково забороняєте виділення тексту в областях, де користувачі можуть хотіти копіювати інформацію. Важливо балансувати між захистом контенту і забезпеченням зручності для користувачів.

автор: Bond правити

+ додати пораду чи нотатку

Синтаксис

element.style.userSelect

Переглядачі

Стаціонарні переглядачі Мобільні переглядачі

Підтримка: стаціонарні переглядачі

Переглядач
	54	69	3*	41	79	10*

Підтримка: мобільні переглядачі

Переглядач
	54	54	79	3*

Приклади

+ запропонувати свій приклад у пісочниці

<div id="draggable">Демонстраційний елемент</div>

var draggableElement = document.getElementById('draggable');
var body = document.body;

// Запобігання виділенню тексту під час перетягування
draggableElement.addEventListener('mousedown', function() {
  body.style.userSelect = 'none';
});

draggableElement.addEventListener('mouseup', function() {
  body.style.userSelect = 'auto';
});

<div id="selectableText">Демонстраційний елемент</div>
<select id="toggleSelectButton">
    <option value="1">перший</option>
    <option value="2">другий</option>
</select>

var textElement = document.getElementById('selectableText');
var toggleButton = document.getElementById('toggleSelectButton');

toggleButton.addEventListener('click', function() {
  if (textElement.style.userSelect === 'none') {
    textElement.style.userSelect = 'text';
    toggleButton.textContent = 'Заборонити виділення';
  } else {
    textElement.style.userSelect = 'none';
    toggleButton.textContent = 'Дозволити виділення';
  }
});