JavaScript: скопировать текст в буфер обмена
В современном браузере текст копируют через navigator.clipboard.writeText(text). Clipboard API обычно доступен в secure context (HTTPS или localhost) и может требовать пользовательского действия; обработайте отказ Promise и сообщите о результате.
Скопировать текст по нажатию кнопки
async function copyText(text) {
if (!globalThis.navigator?.clipboard?.writeText) {
throw new Error('Буфер обмена недоступен в этой среде');
}
await navigator.clipboard.writeText(text);
return 'Скопировано';
}
Object.defineProperty(globalThis, 'navigator', {configurable: true, value: {
clipboard: {writeText: async (text) => { globalThis.copied = text; }}
}});
const message = await copyText('Пример кода');
console.log(`${message}: ${globalThis.copied}`); // Скопировано: Пример кодаВ интерфейсе вызывайте функцию из обработчика клика и показывайте пользователю подтверждение только после успешного завершения.
button.addEventListener('click', async () => {
try {
await copyText(codeElement.textContent);
status.textContent = 'Скопировано';
} catch {
status.textContent = 'Не удалось скопировать';
}
});Условие | Что проверить |
|---|---|
API отсутствует | HTTPS/localhost и поддержка браузера |
Promise отклонён | Разрешение и пользовательский жест |
Копируется неверный текст |
|
Почему navigator.clipboard undefined?
Страница может быть открыта по HTTP, браузер не поддерживает API или контекст ограничен iframe/permissions policy. Проверьте secure context и настройки встраивания.
Нужен ли старый способ с execCommand?
document.execCommand('copy') устарел. Используйте его только для явно поддерживаемых старых браузеров и тестируйте доступность; для нового кода ориентируйтесь на Clipboard API.