JS об'єкт Clipboard
Загальний опис
Clipboard Events — це події, які виникають під час роботи з буфером обміну в JavaScript, включаючи копіювання, вирізання та вставку тексту або інших даних. Ці події надають можливість програмно контролювати вміст буфера обміну або додавати в нього нові дані під час взаємодії користувача з елементами на сторінці. Події copy, cut, та paste пов'язані з ClipboardEvent і дозволяють обробляти дані в реальному часі, перехоплюючи команди перед їх виконанням.
Для роботи з "Clipboard Events" можна використовувати методи 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 надає велику гнучкість для інтеграції копіювання та вставки в різних випадках використання, як-от автоматичне форматування або фільтрація тексту перед вставкою. Це дозволяє зберігати дані або логувати дії користувача, не порушуючи основної функціональності.
| Порада: | Ви можете логувати всі операції з буфером обміну, що важливо для додатків з високою безпекою. Відстежуйте події |
| Порада: |
|
| Порада: | Зберігайте вміст буфера перед модифікацією, щоб мати можливість повертати вихідний текст, якщо необхідно. Це можна реалізувати шляхом збереження початкових даних до зміни в |
Синтаксис
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 |
| Переглядач | ||
|---|---|---|
- |
- |
Приклади
Цей код демонструє інтерактивну роботу з Clipboard Events. Користувач може вводити текст у текстову область, копіювати його за допомогою кнопки, а також вставляти текст із буфера обміну. Стан взаємодії відображається через текстові повідомлення.
У цьому прикладі при копіюванні тексту з поля додається повідомлення "- Скопійовано з сайту". Це корисно для додавання автоматичних позначок, щоб позначити джерело скопійованої інформації або уникнути зловживання вмістом.
const textField = document.getElementById('textField');
textField.addEventListener('copy', (event) => {
const selectedText = document.getSelection().toString();
event.clipboardData.setData('text/plain', selectedText + ' - Скопійовано з сайту');
event.preventDefault();
});Цей код блокує вставку в текстове поле, якщо вміст не є числовим. Він корисний для полів, що приймають лише певні типи даних, наприклад, для телефонних номерів або кількості, допомагаючи уникнути некоректного вводу.
const inputField = document.getElementById('inputField');
inputField.addEventListener('paste', (event) => {
const pastedData = event.clipboardData.getData('text/plain');
if (!/^\d+$/.test(pastedData)) { // Дозволяє вставку тільки чисел
alert('Можна вставляти лише числа');
event.preventDefault();
}
});Методи
Властивості
clipboardData- Властивість події, яка надає доступ до даних у буфері обміну під час виконання подій `copy`, `cut` і `paste`. Вона дозволяє зчитувати, додавати або змінювати дані, які копіюються, вирізаються або вставляються, використовуючи методи `getData()` та `setData()`.