Как скопировать информацию с сайта в буфер обмена по клику

Category: JavaScript Code Examples, JS code examples

Задачу удобно решать используя функционал с clipboardjs.com.

Прямая ссылка для скачивания их актуального js-файла:

https://clipboardjs.com/dist/clipboard.min.js

Примеры выполнения кода есть на официальном сайте, здесь я приведу только самый простой пример:

<script src="jquery.js"></script>
<script src="clipboard.min.js"></script>

<button class="btn" data-clipboard-text="no more js">
    Copy to clipboard
</button>

<script>
new ClipboardJS('.btn');
</script>

В коде выше:

• перед подключением библиотеки скриптов для работы с буфером подключаем актуальную версию jquery
• подключаем библиотеку скриптов
• размещаем кнопку по клику по которой будет происходить копирование
• размещаем блок инициализации под кнопкой
• текст “no more js” будет помещен в буфер обмена

Суть скрипта в том что есть перечень карточек, в них есть 2 кнопки (Скачать бриф), (Скопировать ссылку). При нажатие на скопировать ссылку в буфер обмена закидывается атрибут href кнопки (скачать бриф)  в буфер обмена.
Реализация на чисто JQuery.

let cards = $('.copy_btn');
cards.on('click', function() {

    let btn_copy_link = $(this).siblings('a').attr('href');

    $(this).attr( "data-clipboard-text", btn_copy_link );

    value = $(this).data('clipboard-text');
    let $temp = $("<input>");
          $("body").append($temp);
          $temp.val(value).select();
          document.execCommand("copy");
          $temp.remove();
});

let cards = document.querySelectorAll('.card__brief');

cards.forEach((card) => {
    const button = card.querySelector('.copy_btn');
    const link = card.querySelector('.btn__brief__down');
    
    button.addEventListener('click', () => {
        let copyLink = link.getAttribute('href');

        var dummy = document.createElement("textarea");
        document.body.appendChild(dummy);
        dummy.value = copyLink;
        
        dummy.select();
        document.execCommand("copy");
        document.body.removeChild(dummy);
    })
})