Скопировать текст в буфер обмена нажатием на кнопку

HTML
11.02.2020

Задача простая – копировать текст из какого-то блока нажатием кнопки, например, это может быть код купона или ссылка на статью в конце самой статьи. Согласитесь – довольно таки удобно, вместо выделения и копирования просто нажать одну кнопку и нужный текст уже в буфере обмена.

Самый простой и примитивный HTML для примера:

<div class="coupon">
  <div class="coupon-row">
    <p class="coupon-field" id="coupon-field">Sale30%</p>
    <p class="coupon-alert">Coupon code copied</p>
  </div>
  <button class="coupon-btn">Copy</button>
</div>

Чтобы не загружать мозг лишним кодом, в CSS будет только одно правило для скрытия сообщения об удачном копировании:

.coupon-alert {
  display: none;
}

Ну и самая главная часть – скрипт, который выполнит всю работу:

$(function() {
  // copy content to clipboard
  function copyToClipboard(element) {
    var $temp = $("<input>");
    $("body").append($temp);
    $temp.val($(element).text()).select();
    document.execCommand("copy");
    $temp.remove();
  }

  // copy coupone code to clipboard
  $(".coupon-btn").on("click", function() {
    copyToClipboard("#coupon-field");
    $(".coupon-alert").fadeIn("slow");
  });
});

Думаю, сильно подробно разбирать код нет смысла. Но в двух словах:

Функция copyToClipboard(element) скопирует в буфер содержимое заданного блока.

Копирование произойдет при нажатии на кнопку ".coupon-btn".

copyToClipboard("#coupon-field") – вызываем функцию copyToClipboard(element) и указываем, что нужно скопировать содержимое блока #coupon-field.

$(".coupon-alert").fadeIn("slow"); – после копирования показываем сообщение, что что-то произошло и содержимое блока скопировано.

Ниже рабочий пример, в котором так же добавлено поле, чтобы вставить в него содержимое из буфера и проверить работоспособность кода:

See the Pen Copy text to clipboard by Denis (@deniscreative) on CodePen.default

Рекомендую к прочтению:

Комментарии (11) к “Скопировать текст в буфер обмена нажатием на кнопку”

  • Vital

    какой-то грязный метод… создаётся элемент, потом он удяляется.
    есть же getSelection!

    Ответить

    • Denis Creative

      для getSelection() нужно текст выделить, для примера в статье нужно только нажать кнопку, это идеально подходит для различных акций или купонов.

      Ответить

  • Дмитрий

    Заменил on("click", на click( и все заработало

    Ответить

  • Жека

    А как сделать как что бы текста который копируется НЕ БЫЛО ВИДНО на странице?

    Ответить

  • Семен

    Ваш пример хорош, когда на странице один код купона, а если их несколько? Как сделать чтобы код работал с каждым по отдельности?

    Ответить

    • Denis Creative

      Если есть несколько купонов и несколько кнопок, то можно, во-первых, вынести копирование в отдельную функцию, которая будет срабатывать по клику, а во вторых связать, чтобы при нажатии на кнопку копировалось не какое-то поле по ID, а конкретное поле из того же родительского блока, и тогда не надо будет создавать кучу ID или классов.

      Ответить

      • Сергей

        Здравствуйте. Очень нужен ваш скрипт. Скажите на примере, как сделать, чтобы работало для нескольких блоков текста. И как сделать так, чтобы копировался еще придачу текущий урл страницы. Очень прошу помощи )

        Ответить

  • Иван

    а какой командой в HTML привязать то, что во вкладке JS?

    Ответить

    • Denis Creative

      Эмм, рекомендую немного все же познакомиться с JavaScript и jQuery.
      В HTML, если совсем просто, то сначала нужно подключить jQuery:

      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

      А затем добавить сам скрипт
      внутри тега <script></script>

      <script>
$(function() {
  // code
});
</script>
      Ответить

Оставить комментарий