JS властивість Event.copy

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

copy — це подія, яка виникає у веб-браузері, коли користувач копіює текст або інший контент до буфера обміну. Ця подія є частиною стандарту Clipboard API і дозволяє розробникам контролювати або змінювати вміст, що копіюється. Наприклад, ви можете змінити текст, який копіюється, або додати додаткові дані до буфера обміну. Подія copy зазвичай використовується для надання додаткової функціональності або захисту контенту на веб-сторінці.

Щоб використовувати подію copy, ви можете додати обробник подій до конкретного елемента або документа в цілому. В обробнику подій можна використовувати об'єкт event для доступу до властивостей і методів Clipboard API, що дозволяє змінювати вміст, який копіюється. Наприклад:

document.addEventListener('copy', function(event) {
  event.preventDefault(); // Відміняє стандартну операцію копіювання
  const copiedText = 'Цей текст був змінений під час копіювання!';
  event.clipboardData.setData('text/plain', copiedText);
  console.log('Змінений текст скопійовано до буфера обміну.');
});

У цьому прикладі, коли користувач намагається скопіювати будь-який текст на сторінці, стандартна операція копіювання відміняється, і замість цього до буфера обміну додається кастомний текст "Цей текст був змінений під час копіювання!".

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

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

правити

Порада

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

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

Порада

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

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

Порада

Перевіряйте підтримку Clipboard API у різних браузерах, оскільки деякі старіші версії браузерів можуть не підтримувати повністю цю функціональність. Завжди надавайте резервний варіант, якщо Clipboard API недоступне.

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

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

Синтаксис

element.addEventListener('copy', function(event) {
  // Ваш код тут
});

Переглядачі

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

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

Переглядач
	1	22	3	≤12.1	12	9

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

Переглядач
	4.4	18	22	3

Приклади

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

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

const codeBlock = document.getElementById('codeBlock');

codeBlock.addEventListener('copy', function(event) {
  event.preventDefault();
  const selectedText = window.getSelection().toString();
  const formattedText = '```javascript\n' + selectedText + '\n```';
  event.clipboardData.setData('text/plain', formattedText);
  console.log('Код скопійовано з форматуванням.');
});

document.addEventListener('copy', function(event) {
  event.preventDefault();
  const selectedText = window.getSelection().toString();
  const attribution = '\n\nЦей текст скопійовано з сайту Example.com';
  event.clipboardData.setData('text/plain', selectedText + attribution);
  console.log('Скопійований текст з підписом.');
});