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 допомагає краще контролювати взаємодію користувачів з текстом на веб-сторінці, дозволяючи або забороняючи виділення вмісту залежно від потреб вашого додатку. Це особливо важливо для покращення користувацького досвіду та захисту контенту від небажаного копіювання.
| Порада: | Якщо у вас є специфічні елементи, такі як кнопки або інші інтерактивні елементи, де виділення тексту небажане, використовуйте |
| Порада: | Для забезпечення кращої доступності вашого веб-сайту, переконайтеся, що ви не випадково забороняєте виділення тексту в областях, де користувачі можуть хотіти копіювати інформацію. Важливо балансувати між захистом контенту і забезпеченням зручності для користувачів. |
| Порада: | Якщо у вас є складені елементи, що містять вкладені елементи з різними потребами у виділенні тексту, використовуйте |
Синтаксис
element.style.userSelectЗначення
Return
Переглядачі
| Переглядач | |||||
|---|---|---|---|---|---|
1 |
1 |
3 |
8 |
12 |
| Переглядач | ||||
|---|---|---|---|---|
4.4 |
18 |
4 |
1 |
| Переглядач | ||
|---|---|---|
- |
- |
Приклади
Цей приклад дозволяє користувачам взаємодіяти з елементом тексту, змінюючи можливість виділення тексту за допомогою кнопки. Спочатку текст не можна виділяти, але після натискання кнопки виділення стає можливим, і навпаки. Це надає корисний інтерфейс для демонстрації того, як можна контролювати виділення тексту на веб-сторінці.
У цьому прикладі запобігається виділення тексту на всій сторінці під час перетягування елемента. Це особливо корисно для інтерактивних веб-додатків або ігор, де перетягування елементів може призвести до випадкового виділення тексту, що заважає взаємодії користувача.
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';
});
Цей приклад демонструє, як можна динамічно дозволяти або забороняти виділення тексту в елементі при натисканні кнопки. Це корисно для випадків, коли потрібно надати користувачам можливість копіювати текст тільки за певних умов або в певний час, наприклад, для захисту конфіденційної інформації.
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 = 'Дозволити виділення';
}
});