Задача простая – копировать текст из какого-то блока нажатием кнопки, например, это может быть код купона или ссылка на статью в конце самой статьи. Согласитесь – довольно таки удобно, вместо выделения и копирования просто нажать одну кнопку и нужный текст уже в буфере обмена.
Самый простой и примитивный 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
Комментарии (2) к “Скопировать текст в буфер обмена нажатием на кнопку”
Vital
какой-то грязный метод… создаётся элемент, потом он удяляется.
есть же getSelection!
Дмитрий
Заменил
on("click",
наclick(
и все заработало