Как на JS реализовать копирование текста в буфер обмена по клику на иконку ссылки (navigator.clipboard)?

Для копирования текста в буфер обмена по клику на иконку ссылки в современном JavaScript используется асинхронный API `navigator.clipboard.writeText()`. Этот метод работает в большинстве современных браузеров и требует безопасного контекста (HTTPS или localhost).

## Базовая реализация

Предположим, у вас есть HTML-структура с текстом и иконкой:

html

JavaScript-код для обработки клика:

javascript
const copyButton = document.querySelector(‘.copy-icon’);
const textElement = document.getElementById(‘copy-text’);

copyButton.addEventListener(‘click’, async () => {
const textToCopy = textElement.textContent.trim();

try {
await navigator.clipboard.writeText(textToCopy);
console.log(‘Текст скопирован:’, textToCopy);
showCopyFeedback(copyButton);
} catch (err) {
console.error(‘Ошибка копирования:’, err);
fallbackCopy(textToCopy);
}
});

function showCopyFeedback(button) {
button.classList.add(‘copied’);
button.title = ‘Скопировано!’;
setTimeout(() => {
button.classList.remove(‘copied’);
button.title = ‘Копировать ссылку’;
}, 2000);
}

## Фолбэк для старых браузеров

Если `navigator.clipboard` недоступен, используйте устаревший метод через `document.execCommand`:

javascript
function fallbackCopy(text) {
const textarea = document.createElement(‘textarea’);
textarea.value = text;
textarea.style.position = ‘fixed’;
textarea.style.opacity = ‘0’;
document.body.appendChild(textarea);
textarea.focus();
textarea.select();

try {
document.execCommand(‘copy’);
console.log(‘Скопировано через fallback’);
} catch (err) {
console.error(‘Fallback не сработал:’, err);
}

document.body.removeChild(textarea);
}

## Визуальная обратная связь через CSS

css
.copy-icon {
cursor: pointer;
transition: color 0.2s;
}

.copy-icon.copied {
color: #22c55e;
}

## Важные нюансы

1. **Разрешения**: `navigator.clipboard` требует разрешения пользователя в некоторых браузерах. Обычно оно выдаётся автоматически при взаимодействии с элементом.
2. **HTTPS**: API работает только на защищённых соединениях. На HTTP-сайтах используйте фолбэк.
3. **Асинхронность**: метод возвращает Promise, поэтому обязательно используйте `async/await` или `.then()/.catch()`.
4. **Проверка доступности**: перед вызовом можно проверить `navigator.clipboard !== undefined`.

Такой подход обеспечивает надёжное копирование ссылки с визуальной обратной связью и поддержкой старых браузеров.