Копирование текста по клику в Tilda

Копируем текст в буфер обмена при клике на элемент в Tilda
Как копировать промокод в тильда при клике
В этой статье я покажу, как можно копировать текст в буфер обмена по клику. Данный пример подойдет для промо-акций или для интернет магазинов на платформе Tilda. Промо код можно скопировать при клике на кнопку, или на сам промо код. При копировании пользователь получает уведомление о том, что текст скопирован. Остается только вставить его в поле ввода.

Как копировать текст кликом в Tilda

Пример №1

В данном примере копирование происходит при клике на элемент, содержащий в себе текст промо-кода, например кнопка или текст. Пример реализован в Zero block, для проверки результата добавил поле ввода.
Ваш промо-код:
XX000XX
Кликните, чтобы скопировать
  1. Создаем Zero block;
  2. Добавляем элемент "Текст" или "Кнопка", который содержит в себе текст промо-кода, который мы собираемся копировать;
  3. Присваиваем данному элементу css class example-1 (у меня - это кнопка);
  4. Вставляем код на страницу в блок T123;
  5. Меняем текст об успешном копировании на свой (отмечен комментарием в коде).
<script>
// Пример 1
    $('.example-1 .tn-atom').click(function() {
        var $temp = $("<input>");
        $("body").append($temp);
        $temp.val($('.example-1 .tn-atom').text()).select();
        document.execCommand("copy");
        $temp.remove();
        $(this).text('Тест скопирован!'); //сообщение после клика, добавь свой текст
    });
</script>
<style>
    .example-1 {
        cursor:pointer;
    }
</style>

Пример №2

Во втором примере копируется текст, который находится рядом с кнопкой. Пример так же реализован в Zero block. Единственный нюанс - сообщение о копировании вы создаете с помощью элемента текст и пошаговой анимации.
Ваш промо-код:
Копировать
ZZ000ZZ
Текст скопирован!
Данный пример реализовать так же достаточно просто, но добавилось пара движений в Zero block.
  1. Создаем Zero block;
  2. Добавляем элемент "Текст" или "Кнопка", который содержит в себе текст промо-кода, который мы собираемся копировать;
  3. Присваиваем данному элементу css class example-2-txt;
  4. Создаём кнопку копирования;
  5. Присваиваем кнопке css class example-2-btn;
  6. Добавляем элемент с уведомлением о успешном копировании (у меня это кнопка);
  7. Добавляем пошаговую анимацию:
    - выбираем кнопку с промо-кодом, задаем в первом шаге прозрачность: 100%, время анимации: 0. Во втором шаге - время: 0, прозрачность: 0%. Анимация по клику, в качестве триггера выбираем кнопку копирования (п.4.);
    - выбираем кнопку или текст с сообщением об удачном копировании, в первом шаге анимации - время: 0, прозрачность: 0%, во втором шаге, время: 0, прозрачность: 100%. Анимация по клику, в качестве триггера так же выбираем кнопку копирования (п.4).
  8. Вставляем код на страницу в блок T123.
Слои в zro block tilda
Обратите внимание, текст о копировании находится на нижнем слое, под блоком с промо кодом для того, чтобы оставить возможность копировать обычным выделением.
<script>
//Пример 2
    $('.example-2-btn .tn-atom').attr('onclick', 'copytext2(".example-2-txt .tn-atom")');
    function copytext2(el) {
        var $tmp = $("<textarea>");
        $("body").append($tmp);
        $tmp.val($(el).text()).select();
        document.execCommand("copy");
        $tmp.remove();
    }
</script>
<style>
    .example-2-btn {
        cursor:pointer;
    }
</style>

Пример №3

Данный пример совмещает в себе предыдущие. Текст копируется из соседнего объекта (Пример №2), но сообщение о копировании появляется в кнопке на которую осуществляется клик (Пример №1).
Ваш промо-код:
Копировать
YY000YY
  1. Создаем Zero block;
  2. Добавляем элемент "Текст" или "Кнопка", который содержит в себе текст промо-кода, который мы собираемся копировать;
  3. Присваиваем данному элементу css class example-3-txt;
  4. Создаём кнопку копирования;
  5. Присваиваем кнопке css class example-3-btn;
  6. Вставляем код на страницу в блок T123;
  7. Меняем текст об успешном копировании на свой (отмечен комментарием в коде).
<script>
//Пример 3
    $('.example-3-btn .tn-atom').attr('onclick', 'copytext3(".example-3-txt .tn-atom")');
    function copytext3(el) {
        var $tmp = $("<textarea>");
        $("body").append($tmp);
        $tmp.val($(el).text()).select();
        document.execCommand("copy");
        $tmp.remove();
        $('.example-3-btn .tn-atom').text('Тест скопирован!');
    }
</script>
<style>
    .example-3-btn {
        cursor:pointer;
    }
</style>

Пример №4

Все то же самое, что и в Примере №1 и Примере №3, но кнопка будет менять цвет текста и фона после клика.
Ваш промо-код:
XX-COLOR-XX
Кликните, чтобы скопировать
  1. Создаем Zero block;
  2. Добавляем элемент "Текст" или "Кнопка", который содержит в себе текст промо-кода, который мы собираемся копировать;
  3. Присваиваем данному элементу css class example-4 (у меня - это кнопка);
  4. Вставляем код на страницу в блок T123;
  5. Меняем текст об успешном копировании на свой (отмечен комментарием в коде);
  6. Меняем цвет текста и фона в сообщении об успешном копировании.
<script>
//Пример 4.1
    $('.example-4 .tn-atom').click(function() {
        var $temp = $("<input>");
        $("body").append($temp);
        $temp.val($('.example-4 .tn-atom').text()).select();
        document.execCommand("copy");
        $temp.remove();
        $(this).text('Тест скопирован!'); //сообщение после клика, добавь свой текст
        $(this).addClass('done');
    });
</script>
<style>
    :root {
      --done-bg-color: #2ec700; /*цвет фона после копирования*/
      --done-txt-color: #fff; /*цвет текста после копирования*/
    }
    .example-4,
    .example-4 .tn-atom {
        cursor:pointer;
        transition:all 0s!important;
    }
    .done {
        background-color: var(--done-bg-color)!important;
        color: var(--done-txt-color)!important;
    }
</style>
Ваш промо-код:
Копировать
YY-COLOR-YY
  1. Создаем Zero block;
  2. Добавляем элемент "Текст" или "Кнопка", который содержит в себе текст промо-кода, который мы собираемся копировать;
  3. Присваиваем данному элементу css class example-4-txt;
  4. Создаём кнопку копирования;
  5. Присваиваем кнопке css class example-4-btn;
  6. Вставляем код на страницу в блок T123;
  7. Меняем текст об успешном копировании на свой (отмечен комментарием в коде);
  8. Меняем цвет текста и фона сообщения об успехе (отмечены комментарием в коде).
<script>
//Пример 4.2
    $('.example-4-btn .tn-atom').attr('onclick', 'copytext4(".example-4-txt .tn-atom")');
    function copytext4(el) {
        var $tmp = $("<textarea>");
        $("body").append($tmp);
        $tmp.val($(el).text()).select();
        document.execCommand("copy");
        $tmp.remove();
        $('.example-4-btn .tn-atom').text('Тест скопирован!');
        $('.example-4-btn .tn-atom').addClass('done');
    }
</script>
<style>
    :root {
      --done-bg-color: #2ec700; /*цвет фона после копирования*/
      --done-txt-color: #fff; /*цвет текста после копирования*/
    }
    .example-4-btn,
    .example-4-btn .tn-atom {
        cursor:pointer;
        transition:all 0s!important;
    }
    .done {
        background-color: var(--done-bg-color)!important;
        color: var(--done-txt-color)!important;
    }
</style>

Пример №5

Пятый пример основан на Примере №2, отличается только тем, что нам не нужно возиться с пошаговой анимацией и созданием дополнительного объекта с сообщением об успешном копировании - это несомненно плюс. Плюс Примера №2 в том что вы можете стилизовать сообщение об удачном копировании, как захотите (в рамках функционала zero block. В данном примере я добавлю только фон и цвет текста.
Ваш промо-код:
Копировать
ZZ-COLOR-ZZ
  1. Создаем Zero block;
  2. Добавляем элемент "Текст" или "Кнопка", который содержит в себе текст промо-кода, который мы собираемся копировать;
  3. Присваиваем данному элементу css class example-5-txt;
  4. Создаём кнопку копирования;
  5. Присваиваем кнопке css class example-5-btn;
  6. Вставляем код на страницу в блок T123;
  7. Меняем текст об успешном копировании на свой (отмечен комментарием в коде);
  8. Меняем цвет текста и фона сообщения об успехе (отмечены комментарием в коде).
<script>
//Пример 5
    $('.example-5-btn .tn-atom').attr('onclick', 'copytext5(".example-5-txt .tn-atom")');
    function copytext5(el) {
        var $tmp = $("<textarea>");
        $("body").append($tmp);
        $tmp.val($(el).text()).select();
        document.execCommand("copy");
        $tmp.remove();
        $('.example-5-txt .tn-atom').text('Тест скопирован!');
        $('.example-5-txt .tn-atom').addClass('done');
    }
</script>
<style>
    :root {
      --done-bg-color: #2ec700; /*цвет фона после копирования*/
      --done-txt-color: #fff; /*цвет текста после копирования*/
    }
    .example-5-txt,
    .example-5-txt .tn-atom {
        cursor:pointer;
        transition:all 0s!important;
    }
    .done {
        background-color: var(--done-bg-color)!important;
        color: var(--done-txt-color)!important;
    }
</style>
Я надеюсь вы найдете необходимый стиль, подходящий для вашего проекта. Данные примеры можно реализовать в PopUp-окне, воспользовавшись кодом из статьи "Popup в Zero block Tilda". Так же все возможно адаптировать под стандартные блоки конструктора.
Если возник вопрос, задайте его в комментариях или через форму внизу страницы.
Не забудьте поделиться записью в соцсетях:)
AnKu
Тот, кто пишет
Нужен видео разбор?
Не нашли что искали?
Напишите свой вопрос или предложение через форму ниже
Понравился материал? Поблагодари проект!
Made on
Tilda