Как скопировать значение в буфер обмена

Часто может возникнуть необходимость скопировать какое-то значение в буфер обмена, например, при нажатии на кнопку, и есть два способа сделать это:

Современный метод использует navigator.clipboard. Это браузерное API, которое предоставляет асинхронные методы для чтения и записи данных в буфер обмена

javascript
1navigator.clipboard.writeText('Какой-то текст')
2

Этот метод прост, но есть один важный нюанс: он работает только в безопасных контекстах (например, на страницах, загруженных по HTTPS). Проверить это можно с помощью флага window.isSecureContext. Если страница не является безопасной, вызов методов из navigator.clipboard вызовет ошибку

До появления navigator.clipboard использовался метод document.execCommand('copy'). Он требует немного больше манипуляций с DOM, но работает в небезопасных контекстах и даже самых старых браузерах:

javascript
1// нужно создать какой-то текстовый элемент
2// и установить ему необходимое значение
3const textArea = document.createElement('textarea');
4textArea.value = "Какой-то текст";
5
6// убрать элемент куда-то далеко
7textArea.style.position = 'absolute';
8textArea.style.left = '-999999px;
9
10// и добавить его в вёрстку
11document.body.prepend(textArea);
12
13// далее выделить наше поле ввода
14textArea.select();
15
16try {
17    // и скопировать значение в буфер обмена
18    document.execCommand('copy');
19    console.log('Текст скопирован!');
20} catch (err) {
21    console.error('Не удалось скопировать текст: ', err);
22}
23
24// не забываем удалить элемент из вёрстки
25textArea.remove()
26

Комбинацией обоих способов можно покрыть абсолютно все кейсы во всех браузерах:

javascript
1if (navigator.clipboard && window.isSecureContext) {
2    // используем navigator.clipboard
3} else {
4    // используем document.execCommand('copy')
5}
6