navigator.clipboard — Новый асинхронный Clipboard API в JavaScript

Впервые столкнувшись с новым API navigator.clipboard, я был поражён тем, насколько просто он упростил копирование и вставку в веб-приложениях. Прошли времена хаков document.execCommand.

Раньше для обработки операций с буфером обмена использовался document.execCommand("copy"). Этот подход был синхронным и ограниченным — он мог копировать текст только из выбранных элементов DOM. Кроме того, в разных браузерах он работал нестабильно.

API navigator.clipboard решает эти проблемы, предоставляя асинхронные методы, работающие с различными типами данных. Кроме того, он безопаснее — браузеры требуют явного разрешения, прежде чем разрешить доступ к буферу обмена.

try {
  await navigator.clipboard.writeText('Hello from clipboard!');
  console.log('Text copied');
} catch (err) {
  console.error('Failed to copy:', err);
}

Чтение текста работает аналогичным образом:

try {
  const text = await navigator.clipboard.readText();
  console.log('Pasted content:', text);
} catch (err) {
  console.error('Failed to paste:', err);
}

Копирование сложных данных, например изображений или файлов:

try {
  const imageBlob = new Blob(['<image data>'], {type: 'image/png'});
  const item = new ClipboardItem({
    'image/png': imageBlob
  });
  await navigator.clipboard.write([item]);
} catch (err) {
  console.error('Failed to copy image:', err);
}

Рекомендации относительно поддержки браузерами

Несмотря на широкую поддержку Clipboard API, нелишним будет предусмотреть резервные варианты:

if (navigator.clipboard) {
  // Использование нового Clipboard API
} else {
  // Резервный вариант для старых браузеров, использование execCommand
  const textArea = document.createElement('textarea');
  textArea.value = text;
  document.body.appendChild(textArea);
  textArea.select();
  try {
    document.execCommand('copy');
  } finally {
    document.body.removeChild(textArea);
  }
}

Когда использовать navigator.clipboard API

Асинхронный Clipboard API отлично работает в нескольких типичных сценариях:

• Кнопки копирования в буфер обмена в документации
• Сохранение фрагментов кода из редакторов
• Перемещение медиа контента между приложениями через буфер обмена
• Обработка загрузки изображений с помощью вставки из буфера обмена

Модель разрешений API может показаться лишней, но это достойный компромисс с точки зрения безопасности и надёжности. Прошли времена борьбы с выделением текста и синхронными операциями с буфером обмена.

В следующий раз, когда потребуется реализовать функциональность буфера обмена, воспользуйтесь navigator.clipboard.

Не забудьте добавить поддержку для старых браузеров, и пользователи поблагодарят вас за удобство работы.

Комментарии