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

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

Самый простой и примитивный 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