Кнопка скопировать текст

<!-- Кнопка скопировать текст на Тильде
Студия веб-дизайна SHEINA – https://sheina-studio.ru/ -->


<!-- ====== ИНСТРУКЦИЯ ======
❗️   ВАЖНО. Код работает как в zero-блоке, так и в стандартных.

1️⃣  ZERO-БЛОК
Добавляем весь контент в zero-блок.
Для элемента текста (это может быть как просто текст, так и кнопка в которую вписан текст) — добавляем класс   .uc-copy-text  
Для кнопки, по нажатию на которую будет происходить копирование — задаем класс   .uc-btn-copy  

2️⃣  СТАНДАРТНЫЕ БЛОКИ
Для реализации на стандартных блоках, нам нужно будет добавить отдельно текст для копирования и кнопку
Для блока текста для копирования задаем класс —   .uc-copy-text  
Для блока кнопки —   .uc-btn-copy  

3️⃣  НИЖЕ ВСТАВЛЯЕМ КОД -->



<script>
    document.addEventListener('click', function (e) {
        const btn = e.target.closest('.uc-btn-copy');
        if (!btn) return;
    
        e.preventDefault();
    
        const textEl = document.querySelector('.uc-copy-text');
        if (!textEl) return;
    
        const text = textEl.innerText || textEl.textContent;
    
        // Копирование
        if (navigator.clipboard && navigator.clipboard.writeText) {
            navigator.clipboard.writeText(text).catch(()=>{});
        } else {
            const ta = document.createElement('textarea');
            ta.value = text;
            document.body.appendChild(ta);
            ta.select();
            document.execCommand('copy');
            ta.remove();
        }
    

        let textNode = Array.from(btn.childNodes)
            .find(node => node.nodeType === Node.TEXT_NODE && node.textContent.trim() !== "");
    
        if (!textNode) {
            textNode = btn.querySelector('*')
                ? Array.from(btn.querySelectorAll('*'))
                    .map(el => Array.from(el.childNodes)
                        .find(node => node.nodeType === Node.TEXT_NODE && node.textContent.trim() !== "")
                    )
                    .find(n => n)
                : null;
        }
    
        if (!textNode) return;
    
        const originalText = textNode.textContent.trim();
    
        // текст, который появляется после нажатия на кнопку скопировать (можете заменить на свой)
        textNode.textContent = 'Готово';
    
        setTimeout(() => {
            textNode.textContent = originalText;
        }, 2000);
    });
</script>

<style>
    .uc-btn-copy {
        cursor: pointer !important;
        
    }
</style>