Копирование текста в буфер обмена на JavaScript
Сегодня я хочу показать Вам как можно скопировать некторый текст в буфер обмена с помощью JavaScript. Где это может понадобиться? Допустим Вы у себя на сайте генерируете ссылку, какой-то ключ или еще что-либо в этом роде. Вы хотите предоставить пользователю возможность скоировать эти данные в буфер простым нажатием на ссылку или иконку. Особенно это будет удобно, если у Вас достаточно объемный текст.
Для того, чтобы можно было копировать текст на сайте в буфер обмена, необходимо подключить библиотеку Clipboard.js.
Пример:
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<title>Копирование в буфер на JavaScript</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- 1. Подключаем библиотеку -->
<script src = "https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/2.0.4/clipboard.min.js" type = "text/javascript"></script>
</head>
<body>
<!-- Копируем все, что находится внутри тега p-->
<p id="foo">
Ссылка для вставки:
<a href = "http://myrusakov.ru/subscribe.html"> Подписка </a>
</p>
<!-- data-clipboard-target - ссылка на, то что будет копироваться -->
<button class="btn" data-clipboard-target="#foo">Копировать</button>
<script>
// создаем объект, передавая ему селектор класса .btn
var clip = new ClipboardJS('.btn');
// при успешном копировании, выводим в консоль скопированный текст
clip.on("success", function(e) {
console.log(e.text);
});
</script>
</body>
</html>
Вот так можно скопировать текст в буфер обмена JavaScript.
-
Создано 21.05.2019 10:26:45
-
Михаил Русаков
Комментарии (0):
Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.