JS об'єкт ClipboardEvent

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

ClipboardEvent — це події, які виникають під час роботи з буфером обміну в JavaScript, включаючи копіювання, вирізання та вставку тексту або інших даних. Ці події надають можливість програмно контролювати вміст буфера обміну або додавати в нього нові дані під час взаємодії користувача з елементами на сторінці. Події copy, cut, та paste пов'язані з ClipboardEvent і дозволяють обробляти дані в реальному часі, перехоплюючи команди перед їх виконанням.

Для роботи з "ClipboardEvent" можна використовувати методи addEventListener() для прив’язки функцій обробки до потрібного елемента. Наприклад, обробка події копіювання (copy) дозволяє змінювати дані, що копіюються у буфер обміну:

element.addEventListener('copy', (event) => {
  event.clipboardData.setData('text/plain', 'Текст замінений при копіюванні');
  event.preventDefault(); // Запобігає копіюванню стандартного тексту
});

Подібно, подія cut працює при вирізанні, і її обробка може, наприклад, додавати певні дані до вирізаного тексту. Метод event.clipboardData.setData() дозволяє контролювати, що саме буде збережено до буфера, а event.preventDefault() запобігає виконанню стандартної дії.

Подія paste обробляє вставку даних з буфера обміну і дозволяє перевірити вміст перед вставкою:

element.addEventListener('paste', (event) => {
  const pastedData = event.clipboardData.getData('text/plain');
  console.log('Вставлено:', pastedData);
});

Ця подія зчитує дані, які користувач намагається вставити, використовуючи метод getData(). Clipboard API надає велику гнучкість для інтеграції копіювання та вставки в різних випадках використання, як-от автоматичне форматування або фільтрація тексту перед вставкою. Це дозволяє зберігати дані або логувати дії користувача, не порушуючи основної функціональності.

правити

Порада

Ви можете логувати всі операції з буфером обміну, що важливо для додатків з високою безпекою. Відстежуйте події cut та paste, щоб перевіряти і логувати кожну операцію для підвищення безпеки.

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

Порада

event.clipboardData.getData() дозволяє перевірити типи вставлених даних. Використовуйте це, щоб обмежити вставку тільки тексту, наприклад event.clipboardData.getData('text/plain').

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

Порада

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

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

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

Синтаксис

element.addEventListener('copy', function(event) { /* Код для обробки копіювання */ });
element.addEventListener('cut', function(event) { /* Код для обробки вирізання */ });
element.addEventListener('paste', function(event) { /* Код для обробки вставки */ });

властивості

Переглядачі

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

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

Переглядач
	41	22	10.1	28	12

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

Переглядач
	41	41	22	9

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

Переглядач
	-	-

Приклади

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

<input type="text" id="textField" value="текст для прикладу" placeholder="Введи щось">

const textField = document.getElementById('textField');
textField.addEventListener('copy', (event) => {
  const selectedText = document.getSelection().toString();
  event.clipboardData.setData('text/plain', selectedText + ' - Скопійовано з сайту');
  event.preventDefault();
});

<input type="text" id="inputField" value="текст для прикладу" placeholder="Введи щось">

const inputField = document.getElementById('inputField');
inputField.addEventListener('paste', (event) => {
  const pastedData = event.clipboardData.getData('text/plain');
  if (!/^\d+$/.test(pastedData)) { // Дозволяє вставку тільки чисел
    alert('Можна вставляти лише числа');
    event.preventDefault();
  }
});