JS властивість Event.select
Загальний опис
Подія select спрацьовує, коли користувач виділяє один або кілька символів у текстовому полі, таких як input або textarea. Вона корисна для відстеження виділення тексту, що може бути важливим у додатках, де потрібно зберігати або аналізувати виділену інформацію, наприклад, у системах автозаповнення або інструментах редагування тексту.
Щоб працювати з подією select, слід додати слухача події до елемента текстового вводу або текстової області. В межах обробника події можна отримати доступ до інформації про виділений текст за допомогою властивостей selectionStart і selectionEnd елемента.
Приклад простого використання:
const input = document.querySelector('input');
input.addEventListener('select', function(event) {
const selectedText = input.value.substring(input.selectionStart, input.selectionEnd);
console.log('Виділений текст:', selectedText);
});
У цьому прикладі, коли користувач виділяє частину тексту в полі введення, у консоль виводиться виділений текст. Це особливо корисно, якщо ви хочете відстежувати, який саме текст виділив користувач, і виконувати відповідні дії, як-от показ повідомлень, аналіз або збереження виділеного.
Подія select також може використовуватися в додатках, де необхідно автоматично підставляти виділений текст у певні частини інтерфейсу або виконувати специфічні функції в залежності від контексту виділення. Наприклад, якщо у користувача є текстовий редактор, можна активувати додаткові опції, коли текст виділений.
Ще один приклад:
textarea.addEventListener('select', function() {
alert('Ви виділили текст у текстовій області!');
});
У цьому випадку кожного разу, коли користувач виділяє текст у текстовій області, буде показано сповіщення.
| Порада: | Пам’ятайте, що |
| Порада: | Подія |
| Порада: | Щоб відслідковувати, коли текст більше не виділений, можна використовувати подію |
Синтаксис
element.addEventListener('select', function(event) {
// код обробки події
});Значення
Return
Переглядачі
| Переглядач | |||||
|---|---|---|---|---|---|
66 |
57 |
11.1 |
53 |
16 |
| Переглядач | ||||
|---|---|---|---|---|
66 |
66 |
57 |
11.3 |
| Переглядач | ||
|---|---|---|
15.0.0 |
1.0 |
Приклади
У цьому прикладі користувач вводить текст у текстове поле і може виділяти частини тексту. Після кожного виділення подія select оновлює блок, де відображається виділений текст, і активується кнопка для копіювання. Якщо текст виділений, користувач може скопіювати його в буфер обміну, натиснувши на кнопку.
У цьому прикладі, коли користувач виділяє текст, якщо він збігається з одним із варіантів у списку, система автоматично замінює виділений текст на слово "AUTOFILL". Це може бути використано для створення систем автозаповнення або корекції тексту на основі певних умов.
const input = document.querySelector('input');
const suggestions = ['JavaScript', 'HTML', 'CSS'];
input.addEventListener('select', function() {
const selectedText = input.value.substring(input.selectionStart, input.selectionEnd);
if (suggestions.includes(selectedText)) {
input.value = input.value.replace(selectedText, 'AUTOFILL');
}
});Цей приклад демонструє, як можна показувати виділений текст в реальному часі в іншому елементі сторінки. Коли користувач виділяє текст у полі вводу, вибраний текст відображається в блоці результатів. Це корисно для інструментів, які потребують динамічного оновлення контенту, базуючись на діях користувача.
const input = document.querySelector('input');
const output = document.querySelector('#output');
input.addEventListener('select', function() {
const selectedText = input.value.substring(input.selectionStart, input.selectionEnd);
output.textContent = `Виділений текст: ${selectedText}`;
});