ClipboardJS — копировать данные из `data-clipboard-text`, хранящихся в отдельном элементе
В этом фрагменте я использую Clipboard.js для копирования текста из элемента a, копируя данные, содержащиеся в атрибуте data-clipboard-text.
Это отлично работает, как показано здесь:
<!DOCTYPE html>
<html lang = "en">
<head>
<meta charset = "UTF-8">
<title>Document</title>
<link href = "https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel = "stylesheet">
</head>
<body>
<a class = "btn btn-sm btn-primary copy_data" data-clipboard-text = "that, that and the other">Copy</a>
<script src = "https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/2.0.4/clipboard.min.js"></script>
<script>
var clipboard = new ClipboardJS('.copy_data');;
clipboard.on('success', function(e) {
e.trigger.innerHTML = "Copied!"
setTimeout(function() {
e.trigger.innerHTML = "Copy"
}, 1800);
e.clearSelection();
});
</script>
</body>
</html>Проблема, с которой я борюсь, заключается в том, можно ли сохранить ссылку на копирование в верхней части страницы, но чтобы копируемые данные были определены для отдельного элемента?
Например, вместо этого:
<a class = "btn btn-sm btn-primary copy_data" data-clipboard-text = "that, that and the other">Copy</a>
Я могу сделать это:
<a class = "btn btn-sm btn-primary copy_data">Copy</a>
С элементом, содержащим данные, которые нужно скопировать дальше по странице, например.
<div data-clipboard-text = "that, that and the other"></div>
Это может показаться глупым запросом, но причина, по которой я спрашиваю, заключается в том, что из-за особенностей построения страниц, на которых я использую функцию копирования, кнопка копирования должна находиться вверху страницы, но в самом конце. указывает на то, что HTML написан для отображения кнопки копирования, контент для копирования еще не создан — он не будет создан до тех пор, пока он не будет сгенерирован ниже по странице.
Поэтому я подумал, что если бы я мог по-прежнему хранить данные в атрибуте data-clipboard-text, но при этом иметь кнопку копирования вверху страницы, это решило бы проблему.
Однако я не могу понять, как добиться этого результата с помощью Clipboard.js. В идеале я бы все равно хотел использовать Clipboard.js для копирования.
Обновлено: я видел опцию «Копировать текст из другого элемента» на сайте clipboard.js:
<!-- Target -->
<input id = "foo" value = "https://github.com/zenorocha/clipboard.js.git">
<!-- Trigger -->
<button class = "btn" data-clipboard-target = "#foo">
<img src = "assets/clippy.svg" alt = "Copy to clipboard">
</button>
Однако вместо того, чтобы копировать содержимое, например, из элемента ввода или текстовой области, я хотел скопировать данные из атрибута data-clipboard-text другого элемента, но я не был уверен, как это сделать?
Спасибо
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
Вы можете использовать стандартный триггер (который копирует текст внутри элемента/ввода) или реализовать свой собственный триггер следующим образом:
new ClipboardJS('.my-default-trigger')
new ClipboardJS('.my-custom-trigger', {
text: function(trigger) {
const targetSelector = trigger.getAttribute('data-clipboard-target')
const target = document.querySelector(targetSelector)
return target.getAttribute('data-clipboard-text')
}
})<html>
<head>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/2.0.11/clipboard.min.js" crossorigin = "anonymous"></script>
</head>
<body>
<div id = "my-target" data-clipboard-text = "some text inside data-clipboard-text">some text inside the element</div>
<button class = "my-custom-trigger" data-clipboard-target = "#my-target">
Copy to clipboard (custom trigger)
</button>
<button class = "my-default-trigger" data-clipboard-target = "#my-target">
Copy to clipboard (default trigger)
</button>
</body>
</html>@ 4532066 дополнен специальной реализацией триггера, которую вы можете полностью настроить.
Огромное спасибо @Флориан Вендельборн, это замечательно, работает отлично. Я очень ценю, что вы нашли время ответить :-)
Спасибо за ваш ответ. Я видел этот пример в документации на сайте ClipboardJS. Однако вместо того, чтобы копировать содержимое, например, из элемента ввода или текстовой области, я хотел скопировать данные из атрибута
data-clipboard-textдругого элемента, но не был уверен, как это сделать?