Я использую Clipboard.js для копирования текста на сайт, который я создаю. У меня все работает хорошо, но в случае, когда есть несколько кнопок, все кнопки срабатывают с текстовым сообщением об успешном копировании.
У меня это в нижнем колонтитуле:
<script src = "https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/2.0.4/clipboard.min.js"></script>
<script type = "text/javascript">
var clipboard = new ClipboardJS('.btn');
clipboard.on('success', function(e) {
$(".btn span").html("<strong>Copied!</strong> To Clipboard");
});
</script>
В самой статье есть следующий код:
Example Text <button class = "btn" data-clipboard-text = "Example Text"> <span class = "button-text">Copy to Clipboard</span> </button>
Он отлично работает с одной кнопкой для копирования и вставки. После копирования текст кнопки изменится на «Скопировано! В буфер обмена». Однако, когда есть несколько кнопок и нажата одна из них, все они меняются на «Скопировано! В буфер обмена». Как настроить таргетинг только на кнопку, которую нажал пользователь?
Поведение, которое вы испытываете, вызвано очень расплывчатым (в вашей ситуации) селектором CSS для целевого текста кнопки, который нужно обновить. Это потому, что .btn span
возвращает коллекцию всех кнопок с классом .btn
и <span>
для текста внутри.
Вы должны извлечь выгоду из данных, доступных в объекте события, возвращаемом буфером обмена. Вот пример структуры объекта события:
{
"action": "copy",
"text": "Example Text #1",
"trigger": <button class = "btn" data-clipboard-text = "Example Text #1">…</button>,
"clearSelection": function () { [native code] }
}
Я позволил себе обновить ваш фрагмент, чтобы использовать именно ту кнопку, которую вы нажимаете, со смещением фокуса на элемент ввода, который заполняется значением буфера обмена:
$(() => {
const clipboard = new ClipboardJS('.btn');
clipboard.on('success', e =>
$(e.trigger)
.html("<strong>Copied!</strong> To Clipboard")
.parent()
.find('input')
.val(e.text)
.focus());
});
label {
display: block;
}
<script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/2.0.4/clipboard.min.js"></script>
<label>
Example Text #1
<button class = "btn" data-clipboard-text = "Example Text #1">
<span class = "button-text">Copy to Clipboard</span>
</button>
<input placeholder = "Ctrl+V here..." />
</label>
<label>
Example Text #2
<button class = "btn" data-clipboard-text = "Example Text #2">
<span class = "button-text">Copy to Clipboard</span>
</button>
<input placeholder = "Ctrl+V here..." />
</label>