Подія copy в JavaScript — копіювання тексту сторінки

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

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

Приклади

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

<header>
  <h2 class="title">Подія "copy"</h2>
  <p class="description">Відслідковує подію копіювання та додає додатковий текст до буфера обміну</p>
</header>
<main>
  <div class="result">
    <!-- Поле введення, яке користувач може копіювати -->
    <label for="copyText">Введіть текст для копіювання:</label>
    <input type="text" id="copyText" value="Цей текст буде скопійовано" />

    <!-- Кнопка для копіювання тексту -->
    <button id="copyButton">Копіювати текст</button>

    <!-- Повідомлення про успіх копіювання -->
    <p id="copyMessage" style="display: none; color: green;">Текст скопійовано!</p>
  </div>
</main>

body {
  font-size: 16px;
  line-height: 1.5;
  font-family: monospace;
}

header {
  background-color: #f1f1f1;
  margin-bottom: 25px;
  padding: 15px;
  -webkit-box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
  -moz-box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
  box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
}

header h2.title {
  padding-bottom: 15px;
  border-bottom: 1px solid #999;
}

header p.description {
  font-style: italic;
  color: #222;
}

.result {
  background-color: #f8f8f8;
  padding: 15px;
  -webkit-box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
  -moz-box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
  box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
}

#copyText {
  width: 100%;
  padding: 8px;
  margin: 10px 0;
}

#copyButton {
  padding: 8px 12px;
  background-color: #4CAF50;
  color: #fff;
  border: none;
  cursor: pointer;
}

#copyButton:hover {
  background-color: #45a049;
}

document.getElementById("copyButton").addEventListener("click", () => {
  const inputField = document.getElementById("copyText");

  // Вибір тексту в полі
  inputField.select();
  inputField.setSelectionRange(0, 99999); // Для мобільних пристроїв

  // Виконання команди копіювання
  document.execCommand("copy");

  // Відображення повідомлення про копіювання
  const message = document.getElementById("copyMessage");
  message.style.display = "block";

  // Автоматичне приховування повідомлення через 2 секунди
  setTimeout(() => {
    message.style.display = "none";
  }, 2000);
});

// Додає текст до буфера обміну під час події копіювання
document.getElementById("copyText").addEventListener("copy", event => {
  const inputField = document.getElementById("copyText");
  const additionalText = "\n(Скопійовано з додатковим текстом!)";
  const originalText = inputField.value;

  event.clipboardData.setData("text/plain", originalText + additionalText);
  event.preventDefault(); // Запобігає стандартній дії
});
//# sourceURL=pen.js

<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('Скопійований текст з підписом.');
});