Часто задача копирования указанного текста по кнопке требуется при реализации копирования ссылки на текущую страницу для блока «Поделиться».

Я покажу общий функционал, а вы уж сами адаптируете под то, что будете копировать.

Для реализации кнопки, которая будет выполнять копирование указанного текста, нам понадобится:

  • Написать необходимый HTML с кнопкой и копируемым текстом.
  • Реализовать функцию копирования текста на JS.
  • Реализовать событие клика по кнопке, которое будет вызывать копирование.

HTML для кнопки

HTML для кнопки получается очень простой. Это даже не обязательно должна быть кнопка, это может быть любой элемент. Просто добавим элементу какой-нибудь класс, по которому потом будет реализовано событие клика, у меня это js-button-copy. А также укажем в data-атрибут, у меня это data-text, текст, который мы будем копировать. 

<div class="js-button-copy" data-text="Копируемый текст">Скопировать</div>

Функция копирования

Далее нужно в вашем JS коде реализовать функцию копирования. 

function copyTextToClipboard(text) {
    //создаем временную textarea
    const textArea = document.createElement('textarea');

    textArea.style.position = 'fixed';
    textArea.style.top = '0';
    textArea.style.left = '0';
    textArea.style.padding = '0';
    textArea.style.width = '2em';
    textArea.style.height = '2em';
    textArea.style.border = 'none';
    textArea.style.outline = 'none';
    textArea.style.boxShadow = 'none';
    textArea.style.background = 'transparent';

    textArea.value = text;

    document.body.appendChild(textArea);

    textArea.focus();
    textArea.select();

    try {
        const successful = document.execCommand('copy');
        
        console.log(successful ? 'Успешно скопировано' : 'Копирование не удалось');
    } catch (err) {
        console.error('Ошибка при копировании');
    }

    document.body.removeChild(textArea);
}

Данная функция на лету создает элемент textarea в DOM, помещает в него переданный текст, выделяет его и выполняет операцию копирования. Затем удаляет данный элемент. Все происходит мгновенно.

Да, можно для копирования использовать и другой подход, через navigator: 

function copyTextToClipboard(text) {
    navigator.clipboard.writeText(text);
}

Однако я замечал, что через navigator копирование иногда может не работать. Поэтому предпочитаю первый вариант, который 100% сработает.

Событие клика по кнопке

Осталось лишь в вашем JS коде добавить событие клика по ранее размеченному элементу и вызвать в нем функцию копирования, добавленную ранее. 

document.addEventListener('DOMContentLoaded', () => {
    document.addEventListener('click', (e) => {
        const copyBtn = e.target.closest('.js-button-copy');

        if (!copyBtn) return;

        copyTextToClipboard(copyBtn.dataset['text'] ?? '');
    });
});

Предпочитаю писать события клика через document, чтобы не приходилось думать об инициализации событий, если контент появился на странице динамически, например, через ajax.

Готово, теперь при клике на любой элемент, у которого есть класс js-button-copy, будет срабатывать копирование текста из его атрибута data-text.

Пример можете увидеть прям здесь в блоке «Поделиться» (последняя иконка для копирования ссылки).