Clipboard API

Программное чтение и запись в буфер обмена.

Зачем нужно

Современный асинхронный API для работы с буфером обмена. Заменяет устаревший document.execCommand('copy'). Требует разрешения и HTTPS.

Где используется

  • Кнопка "Скопировать" для кода/ссылок
  • Вставка изображений из буфера
  • Копирование форматированного контента

Code

// Копировать текст
await navigator.clipboard.writeText('Hello!');

// Прочитать текст
const text = await navigator.clipboard.readText;

// Копировать изображение
const blob = await fetch('image.png').then(r => r.blob());
await navigator.clipboard.write([
  new ClipboardItem({ 'image/png': blob })
]);

// Кнопка копирования
btn.addEventListener('click', async () => {
  try {
    await navigator.clipboard.writeText(code.textContent);
    btn.textContent = 'Copied!';
  } catch (err) {
    console.error('Copy failed:', err);
  }
});

// Событие вставки
document.addEventListener('paste', (e) => {
  const text = e.clipboardData.getData('text/plain');
  const files = e.clipboardData.files; // изображения
});

Связанные темы

Ресурсы