JS властивість Event.paste
Загальний опис
Подія paste виникає, коли користувач вставляє вміст із буфера обміну у вибраний елемент, наприклад, текстове поле або будь-який інший редагований елемент. Ця подія є частиною подій введення і корисна для контролю та обробки тексту або даних, які користувач вставляє на сторінку.
Один з найважливіших аспектів paste — це можливість доступу до вмісту буфера обміну через об'єкт ClipboardEvent. Він містить методи та властивості, які дозволяють отримати дані, що вставляються. Використовуючи метод event.clipboardData.getData(), ви можете отримати текст або інші типи даних, що вставляються, такі як HTML або зображення.
Наприклад, щоб отримати текст, який користувач вставляє у текстове поле, можна використовувати наступний код:
document.getElementById('textInput').addEventListener('paste', function(event) {
const pastedText = event.clipboardData.getData('text');
console.log('Вставлений текст:', pastedText);
event.preventDefault(); // За потреби зупиняємо стандартну дію
});
Цей код перехоплює вставку тексту у текстове поле, виводить вміст у консоль і при необхідності може запобігти стандартній вставці, використовуючи метод event.preventDefault().
Подія paste також дозволяє здійснювати перевірку та фільтрацію вмісту, щоб гарантувати безпеку або відповідність вставленого вмісту певним вимогам. Наприклад, можна перевіряти, чи вставляється лише текст без небажаних HTML-тегів або скриптів, які можуть бути потенційно небезпечними.
Окрім тексту, за допомогою події paste можна працювати з зображеннями та іншими типами даних. Це робить її важливим інструментом для розробників, які хочуть контролювати вміст, що вставляється на сторінку, і обробляти його згідно з бізнес-логікою.
| Порада: | Якщо ви працюєте із зображеннями, вставленими через буфер обміну, використовуйте |
| Порада: | При роботі з |
| Порада: | Щоб додати додаткові можливості для користувачів, можна комбінувати події |
Синтаксис
element.addEventListener('paste', function(event) {
// код для обробки події
});Значення
Return
Переглядачі
| Переглядач | |||||
|---|---|---|---|---|---|
66 |
57 |
11.1 |
53 |
16 |
| Переглядач | ||||
|---|---|---|---|---|
66 |
66 |
57 |
11.3 |
| Переглядач | ||
|---|---|---|
15.0.0 |
1.0 |
Приклади
Коли користувач вставляє текст у поле, обробник події paste зупиняє стандартну вставку і замість цього отримує текст із буфера обміну. Потім він очищує цей текст, видаляючи зайві пробіли, і вставляє його в поле.
У цьому прикладі подія paste використовується для перехоплення тексту, вставленого в текстове поле, і його очищення від HTML-тегів. Після цього очищений текст відображається в іншому елементі на сторінці. Це дозволяє запобігти вставці небажаних HTML-елементів, що може бути корисним для захисту від XSS-атак.
document.getElementById('textInput').addEventListener('paste', function(event) {
const pastedText = event.clipboardData.getData('text');
const sanitizedText = pastedText.replace(/<[^>]*>?/gm, ''); // Очищуємо від HTML-тегів
document.getElementById('output').innerText = sanitizedText;
event.preventDefault(); // Зупиняємо стандартну вставку
});Цей приклад показує, як можна використовувати подію paste для обробки вставлених зображень. Коли користувач вставляє зображення з буфера обміну, воно відображається на сторінці. Це дозволяє швидко й інтерактивно працювати з зображеннями без необхідності їхнього завантаження через форми або інші елементи.
document.getElementById('imageInput').addEventListener('paste', function(event) {
const items = event.clipboardData.items;
for (let i = 0; i < items.length; i++) {
if (items[i].kind === 'file') {
const blob = items[i].getAsFile();
const img = document.createElement('img');
img.src = URL.createObjectURL(blob);
document.getElementById('output').appendChild(img);
}
}
event.preventDefault();
});