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 може впливати на зручність користувачів, тому рекомендується використовувати її обережно. Надмірне обмеження або зміна скопійованого контенту без явної потреби може роздратувати користувачів.
| Порада: | Не використовуйте подію |
| Порада: | Якщо ви хочете змінити вміст, який копіюється, використовуйте метод |
| Порада: | Перевіряйте підтримку Clipboard API у різних браузерах, оскільки деякі старіші версії браузерів можуть не підтримувати повністю цю функціональність. Завжди надавайте резервний варіант, якщо Clipboard API недоступне. |
Синтаксис
element.addEventListener('copy', function(event) {
// Ваш код тут
});Значення
Return
Переглядачі
| Переглядач | |||||
|---|---|---|---|---|---|
66 |
57 |
11.1 |
53 |
16 |
| Переглядач | ||||
|---|---|---|---|---|
66 |
66 |
57 |
11.3 |
| Переглядач | ||
|---|---|---|
15.0.0 |
1.0 |
Приклади
У цьому прикладі натискання кнопки "Копіювати текст" копіює текст із поля введення разом із додатковим рядком "(Скопійовано з додатковим текстом!)", який автоматично додається через обробник події copy.
У цьому прикладі кожного разу, коли користувач копіює текст зі сторінки, до нього автоматично додається підпис з посиланням на оригінальне джерело. Це корисно для захисту авторських прав і забезпечення належного цитування скопійованого контенту.
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('Скопійований текст з підписом.');
});Цей приклад демонструє, як можна змінити текст, що копіюється, додаючи до нього спеціальне форматування. Це корисно для копіювання коду або інших текстових даних, які потребують певного форматування, щоб зберегти правильний вигляд при вставці в інші середовища.
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('Код скопійовано з форматуванням.');
});