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('Ви виділили текст у текстовій області!');
});

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

правити

Порада

Пам’ятайте, що select спрацьовує тільки в полях введення і текстових областях. Для інших елементів, як-от параграфи або заголовки, цю подію використовувати не можна. Якщо вам потрібно відслідковувати виділення тексту в різних елементах сторінки, вам слід скористатися іншими подіями, як-от mouseup або працювати з API виділення (Selection API).

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

Порада

Подія select може бути корисною для створення контекстних меню. Коли користувач виділяє текст, ви можете відобразити меню з опціями копіювання, вставки або інших дій, що дозволяє покращити взаємодію з користувачем.

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

Порада

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

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

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

Синтаксис

element.addEventListener('select', function(event) {
  // код обробки події
});

Переглядачі

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

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

Переглядач
	66	57	11.1	53	16

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

Переглядач
	66	66	57	11.3

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

Переглядач
	15.0.0	1.0

Приклади

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

<div id="output">Демонстраційний елемент</div>
<input type="text" value="текст для прикладу">

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}`;
});

<input type="text" value="текст для прикладу">

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');
  }
});