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 можна працювати з зображеннями та іншими типами даних. Це робить її важливим інструментом для розробників, які хочуть контролювати вміст, що вставляється на сторінку, і обробляти його згідно з бізнес-логікою.

правити

Порада

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

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

Порада

При роботі з paste можна обмежити типи вставлених даних. Наприклад, можна перевіряти, чи вставляється текст або HTML, і залежно від цього застосовувати різні методи обробки вмісту.

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

Порада

Щоб додати додаткові можливості для користувачів, можна комбінувати події paste з іншими подіями введення, такими як input або keydown, що дозволить створити більш інтерактивні форми або елементи керування вмістом.

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

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

Синтаксис

element.addEventListener('paste', function(event) {
  // код для обробки події
});

Переглядачі

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

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

Переглядач
	66	57	11.1	53	16

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

Переглядач
	66	66	57	11.3

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

Переглядач
	15.0.0	1.0

Приклади

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

<input type="text" id="textInput" value="текст для прикладу" placeholder="Введи щось">
<div id="output">Демонстраційний елемент</div>

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(); // Зупиняємо стандартну вставку
});

<img id="imageInput" src="/img/logo.svg" width="100" alt="Демонстраційне зображення">
<div id="output">Демонстраційний елемент</div>

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();
});