💕 Как сделать кнопку «Скопировать текст»

С недавних пор я стала делать на коммерческих сайтах своих клиентов кнопку «Скопировать реквизиты». Не то, чтобы это было прямо таки необходимо, это скорее просто маленький удобный UX-элемент, который показывает заботу о посетителе сайта.

Делюсь с вами кодом для кнопки копирования любого текста в буфер обмена:

<!--Code by khudova.design-->
<style>
.copy-button {
    cursor: pointer;
}
</style>

<script>
t_onReady(function () {
    var copyBtn = document.querySelector('.copy-button');
    var copyBtnText = document.querySelector('.copy-button .tn-atom__button-text');
    var TexttoCopy = document.querySelector('.text-to-copy .tn-atom');
    if (!copyBtn || !copyBtnText || !TexttoCopy) return;
    var originalText = copyBtnText.textContent;
    var timeoutId = null;
    copyBtn.addEventListener('click', function () {
        // Код из тг-канала khudovadesign
        // Берём HTML, чтобы корректно обработать <br>
        var text = TexttoCopy.innerHTML;
        // Заменяем <br> и <br/> на перенос строки
        text = text.replace(/<br\s*\/?>/gi, '\n');
        // Удаляем неразрывные пробелы
        text = text.replace(/ /gi, ' ');
        text = text.replace(/\u00A0/g, ' ');
        // Убираем пробелы в начале и конце строк
        text = text.trim();

        navigator.clipboard.writeText(text).then(function () {
            copyBtnText.textContent = 'Реквизиты скопированы!';

            if (timeoutId) clearTimeout(timeoutId);
            timeoutId = setTimeout(function () {
                copyBtnText.textContent = originalText;
            }, 3000);
        }).catch(function (err) {
            console.error('Ошибка копирования:', err);
        });
    });
});
</script>

❗️ Правила использования:

⭐️ Тексту, который надо скопировать, присвойте класс text-to-copy
⭐️ Кнопке, по нажатию на которую должно происходить копирование, присвойте класс copy-button, а поле ссылки оставьте пустой
⭐️ В коде замените фразу 'Реквизиты скопированы!' на ту, которая должна появляться на короткое время после нажатия на кнопку
⭐️ Сам код вставьте в блок Т123

💭 По любым вопросам и пожеланиям к модификации пишите в комментариях 🐱

#тильда #модификации