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

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

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



.copy-button {
cursor: pointer;
}



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, чтобы корректно обработать
var text = TexttoCopy.innerHTML;
// Заменяем и на перенос строки
text = text.replace(//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);
});
});
});


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

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

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

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