URL скопирован в буфер обмена!
Как сделать копирование текста при нажатии на кнопку в Zero Block?
С помощью этой модификации можно сделать свою кнопку, при нажатии на которую будет копироваться текст (например промокод в магазине или контакты на сайте визитке)
Модификация обновлена. Появилась возможность при клике выводить плашку с текстом "текст скопирован" + кастомизация плашки
Модификация работает с включенным Autoscale в блоках
Модификация работает только с Zero Block
Номер модификации в библиотеке TiCode
Класс для кнопки
Класс для текста
Текс на кнопке до копирования
Текс на кнопке после копирования
Сообщение о копировании
Цвет фона плашки
Текст сообщения
Цвет текста
Размер текста
Цвет обводки
Толщина обводки
Радиус скругления углов
Направление анимации
Настройки плашки
<!--TICODE--><!-- Библиотека модификаций для Тильда https://ticode.dev -->
<!--TCD027--> <style>
.tc-button-copy {
cursor: pointer;
}
#TCDcopyTextNotification {
visibility: hidden;
position: fixed;
bottom: 20px;
right: 20px;
border: px solid;
border-radius: 10px;
background-color: #F96855;
padding: 10px;
z-index: 999999;
transition: transform 0.5s cubic-bezier(0.25, 0.8, 0.25, 1), opacity 0.5s cubic-bezier(0.25, 0.8, 0.25, 1), visibility 0.5s;
transform: translateY(20px);
opacity: 0;
}
#TCDcopyTextNotification span {
font-size: 16px;
color: #ffffff;
font-family: Arial, sans-serif;
font-weight: 500;
}
#TCDcopyTextNotification.show {
visibility: visible;
transform: translateY(0);
opacity: 1;
}
</style>
<div id="TCDcopyTextNotification"><span>Текст скопирован в буфер обмена!</span></div>
<script>
function selectText(elementId) {
var doc = document,
text = doc.querySelector(elementId),
range, selection;
if (doc.body.createTextRange) {
range = document.body.createTextRange();
range.moveToElementText(text);
range.select();
} else if (window.getSelection) {
selection = window.getSelection();
range = document.createRange();
range.selectNodeContents(text);
selection.removeAllRanges();
selection.addRange(range);
}
}
let TicodeBtnTextsBefore = "Скопировать";
let TicodeBtnTextsAfter = "Скопировано";
function ticodeSwitcher() {
$('.tc-button-copy').find('.tn-atom').text(TicodeBtnTextsBefore);
}
$('.tc-button-copy').on('click', function() {
selectText('.tc-copy-text');
document.execCommand("copy");
setTimeout(ticodeSwitcher, 3000);
$(this).find('.tn-atom').text(TicodeBtnTextsAfter);
});
</script>
Для нормальной работы модификации необходимо включить библиотеку jQuery.
Как включить: Настройки сайта -> Еще -> Подключить jQuery на страницах сайта
Как включить: Настройки сайта -> Еще -> Подключить jQuery на страницах сайта
1. Создаем Zero Block с кнопкой и текстом, который должна копировать кнопка.
2. В кнопке пишем текст такой же как в генераторе из поля "текст кнопке до копирования" и назначаем кнопке класс tc-button-copy
Чтобы добавить класс, нажимаем на элемент правой кнопкой мыши и выбираем из списка "Add CSS Class Name" и далее, справа в настройках указываем класс
3. Тексту назначаем класс tc-copy-text
4. Указываем в генераторе текст для кнопки после копирования. Например "Скопировано"
5. Копируем код из генератора и вставляем в HTML блок Т123
2. В кнопке пишем текст такой же как в генераторе из поля "текст кнопке до копирования" и назначаем кнопке класс tc-button-copy
Чтобы добавить класс, нажимаем на элемент правой кнопкой мыши и выбираем из списка "Add CSS Class Name" и далее, справа в настройках указываем класс
3. Тексту назначаем класс tc-copy-text
4. Указываем в генераторе текст для кнопки после копирования. Например "Скопировано"
5. Копируем код из генератора и вставляем в HTML блок Т123
Забери свой
ваш промокод
промокод
T3XK57PF
