Копировать текст из DOM элементов в буфер обмена
Есть разметка, содержащая текстовую информацию:
<div class="text_row">
<div class="name _copy">телефон</div>
<div class="value _copy">+7 902 990 1812</div>
</div>
<div class="text_row">
<div class="name _copy">e-mail</div>
<div class="value _copy">[email protected]</div>
</div>
<div class="cntrl">
<p>ctrl+c</p>
</div>Нужно, при нажатии на кнопку, скопировать содержание блоков в буфер обмена.
Ответы (1 шт):
Автор решения: UModeL
→ Ссылка
Найти элементы и получить текстовое содержимое, трудностей не составляет. Также, как и копирование в буфер обмена. Одна загвоздка - здесь, в сниппете, это не проверить, ибо запрет. Пример только отобразит в консоли то, что будет скопировано, но на реальном сайте всё должно сработать:
const copyBtn = document.querySelector('.cntrl > p');
copyBtn.addEventListener('click', () => {
let copyData = [...document.querySelectorAll('._copy')].map(el => el.textContent).join('\n');
if (copyData) {
console.log(copyData);
navigator.clipboard.writeText(copyData);
}
});<div class="text_row">
<div class="name _copy">телефон</div>
<div class="value _copy">+7 902 990 1812</div>
</div>
<div class="text_row">
<div class="name _copy">e-mail</div>
<div class="value _copy">[email protected]</div>
</div>
<div class="cntrl">
<p>ctrl+c</p>
</div>