Clipboard API: работа с буфером обмена (copy, paste)

Что такое Clipboard API и зачем он нужен? 🤔

Clipboard API — это мощный инструмент для работы с буфером обмена прямо из браузера. С его помощью можно:

Копировать текст, изображения и другие данные в буфер обмена (copy).
Вставлять содержимое буфера на страницу (paste).
Создавать кастомные интерфейсы для работы с буфером (например, кнопку «Скопировать ссылку»).

⚠️ Важно! Доступ к буферу обмена ограничен из соображений безопасности. Для некоторых операций (например, paste) требуется разрешение пользователя.

Основные методы и свойства 🛠️

`navigator.clipboard`

Главный объект для работы с буфером обмена. Проверяем поддержку в браузере:

if (!navigator.clipboard) {
  console.log('Clipboard API не поддерживается в вашем браузере');
}

`writeText()` — копируем текст

Самый простой способ скопировать текст:

async function copyText(text) {
  try {
    await navigator.clipboard.writeText(text);
    console.log('Текст скопирован!');
  } catch (err) {
    console.error('Ошибка копирования:', err);
  }
}

// Использование:
copyText('Привет, буфер обмена!');

`readText()` — вставляем текст

Чтение текста из буфера (требует разрешения):

async function pasteText() {
  try {
    const text = await navigator.clipboard.readText();
    console.log('Вставленный текст:', text);
    return text;
  } catch (err) {
    console.error('Ошибка вставки:', err);
  }
}

// Использование:
pasteText().then(text => {
  document.getElementById('input').value = text;
});

Работа с изображениями и файлами 🖼️

Копирование изображений

Используем write() для сложных данных:

async function copyImage(imgUrl) {
  try {
    const response = await fetch(imgUrl);
    const blob = await response.blob();
    await navigator.clipboard.write([
      new ClipboardItem({
        [blob.type]: blob
      })
    ]);
    console.log('Изображение скопировано!');
  } catch (err) {
    console.error('Ошибка копирования изображения:', err);
  }
}

Вставка изображений

Чтение данных из буфера:

document.addEventListener('paste', async (e) => {
  const items = await navigator.clipboard.read();
  for (const item of items) {
    for (const type of item.types) {
      if (type.startsWith('image/')) {
        const blob = await item.getType(type);
        const img = document.createElement('img');
        img.src = URL.createObjectURL(blob);
        document.body.appendChild(img);
      }
    }
  }
});

Практические примеры 🔥

1. Кнопка «Скопировать ссылку»

Добавляем функциональность одной строкой:

<button onclick="navigator.clipboard.writeText(window.location.href)">
  Скопировать ссылку
</button>

2. Кастомный обработчик вставки

Создаем поле для вставки с валидацией:

const input = document.getElementById('paste-input');

input.addEventListener('paste', async (e) => {
  e.preventDefault();
  const text = await navigator.clipboard.readText();
  if (text.length < 100) {
    input.value = text;
  } else {
    alert('Слишком длинный текст!');
  }
});

Безопасность и ограничения 🔒

Разрешения: В Chrome для readText() требуется разрешение (всплывающее окно).
HTTPS: API работает только на безопасных соединениях (HTTPS или localhost).
Фокус страницы: Операции доступны только при активной вкладке.

💡 Совет от Данилы Бежина: Всегда обрабатывайте ошибки при работе с буфером обмена — пользователь может отказать в доступе! Подробнее на YouTube-канале.

Полифиллы и fallback-решения

Для старых браузеров используем document.execCommand (устаревший, но рабочий метод):

function fallbackCopyText(text) {
  const textarea = document.createElement('textarea');
  textarea.value = text;
  document.body.appendChild(textarea);
  textarea.select();
  document.execCommand('copy');
  document.body.removeChild(textarea);
}

Итоги 🎯

Clipboard API — современный способ работы с буфером обмена.
Основные методы: writeText(), readText(), write(), read().
Всегда проверяем поддержку браузером и обрабатываем ошибки.
Для сложных сценариев (изображения, файлы) используем ClipboardItem.

Теперь вы можете создавать удобные интерфейсы для работы с буфером обмена! 🚀