Загрузка...
Если надо скопировать в буфер обмена текст из блока то можно использовать document.execCommand. Но при использовании данного способа не копируются иконки, точнее кода иконок.
Тут на помощь придет скрипт clipboard.js, который легко с этим справится.
Пример кода, копирования в буфер обмена на основе clipboard.js
<html>
<head>
<script src="/js/clipboard.min.js"></script>
</head>
<body>
<div id="icon_xxx" class="emojis__list__native ng-binding" >Ok Emoji: 👌</div>
<button class="btn" data-clipboard-action="copy" data-clipboard-target="#icon_xxx">
Copy to clipboard
</button>
<script>
var clipboard = new ClipboardJS('.btn');
clipboard.on('success', function(e) {
console.info('Action:', e.action);
console.info('Text:', e.text);
console.info('Trigger:', e.trigger);
e.clearSelection();
});
clipboard.on('error', function(e) {
console.error('Action:', e.action);
console.error('Trigger:', e.trigger);
});
</script>
</body>
</html>
Параметры кнопки
data-clipboard-action — действие кнопки, могут быть следующие значения, cut или copy.
Значение cut можно использовать если вырезание будет у тегов input или textarea
data-clipboard-target — цель кнопки, то есть откуда брать значение
data-clipboard-text — текст который надо скопировать, если использовать данный параметр то data-clipboard-target добавлять не нужно.
Так же, если вы работаете с одностраничными приложениями, вы можете более точно управлять жизненным циклом DOM.
Так можно очистить события и объекты, которые мы создаем.
var clipboard = new ClipboardJS('.btn');
clipboard.destroy();
Примечание
Почему то в Firefox в «Инспекторе», где отображается HTML код страницы, у кнопки не подсвечивается использование скрипта, скорей всего из-за того что используется не событие а создается класс ClipboardJS который подключается к кнопке. И получается, вы вроде бы сделали все правильно а копирование не работает, и не понятно, или значения параметров не верно указали или скрипт не подключили к кнопке или еще что-то.