Задача простая – копировать текст из какого-то блока нажатием кнопки, например, это может быть код купона или ссылка на статью в конце самой статьи. Согласитесь – довольно таки удобно, вместо выделения и копирования просто нажать одну кнопку и нужный текст уже в буфере обмена.
Самый простой и примитивный 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(
и все заработалоЖека
А как сделать как что бы текста который копируется НЕ БЫЛО ВИДНО на странице?
Жека
понял, можно тупо через стили display: none; :)
Семен
Ваш пример хорош, когда на странице один код купона, а если их несколько? Как сделать чтобы код работал с каждым по отдельности?
Denis Creative
Если есть несколько купонов и несколько кнопок, то можно, во-первых, вынести копирование в отдельную функцию, которая будет срабатывать по клику, а во вторых связать, чтобы при нажатии на кнопку копировалось не какое-то поле по ID, а конкретное поле из того же родительского блока, и тогда не надо будет создавать кучу ID или классов.
Сергей
Здравствуйте. Очень нужен ваш скрипт. Скажите на примере, как сделать, чтобы работало для нескольких блоков текста. И как сделать так, чтобы копировался еще придачу текущий урл страницы. Очень прошу помощи )
Иван
а какой командой в HTML привязать то, что во вкладке JS?
Denis Creative
Эмм, рекомендую немного все же познакомиться с JavaScript и jQuery.
В HTML, если совсем просто, то сначала нужно подключить jQuery:
А затем добавить сам скрипт
внутри тега
<script></script>
Иван
спасибо!