@arttstyle
web-макака

Как копировать в буфер текст внутри кнопки?

не могу разобраться как сделать так чтобы кнопка копировала свое же содержимое в буфер обмена...
document.querySelector('.copybox').addEventListener('click', function({ target: t }) {
  if (t.tagName === 'BUTTON') {
    navigator.clipboard.writeText(t.previousElementSibling.textContent);
  }
});
вот код, он копирует содержание предыдущего блока в буфер... но теперь я хочу копировать содержание самой же кнопки...

<div class="copybox">
<div class="copyhead"></div><button class="copybtn" type="button">содержимое1</button>
<div class="copyhead"></div><button class="copybtn" type="button">содержимое2</button>
<div class="copyhead"></div><button class="copybtn" type="button">содержимое3</button>
<div class="copyhead"></div><button class="copybtn" type="button">содержимое4</button>
</div>

поигрался с кодом и попробовал просто убрать предыдущий элемент
navigator.clipboard.writeText(t.textContent);
оно работает но копирует только содержимое первой кнопки... я так понимаю придется вообще поменять структуру кода для такой затеи?
  • Вопрос задан
  • 97 просмотров
Решения вопроса 3
SilbO3
@SilbO3
React, JS
Пользуюсь таким.
const copyValue = (event) => {
	const tmp = document.createElement('input')
	const focus = document.activeElement
	tmp.value = event.target.innerText
	document.body.appendChild(tmp)
	tmp.select()
	document.execCommand('copy')
	document.body.removeChild(tmp)
	focus.focus()
}

document.querySelector('button').addEventListener('click', copyValue)
Ответ написан
sniggering_deus
@sniggering_deus Куратор тега JavaScript
I will live forever in the flame of your eyes.
Создаём кнопку => Вставляем в неё два элемента => В первом будет какое-нибудь слово, например Копировать, а во втором собственно говоря контент который будет копироваться по клику на кнопку.

Контент для копирования скрывается через CSS => display: none;. В итоге он есть, но визуально скрыт и его можно скопировать при клике на кнопку.

const copyButtons = document.querySelectorAll(".button");

copyButtons.forEach(el => {
      
const copyCode = el.querySelector(".button__content");   
el.addEventListener("click", function(e) {
el.classList.add("animated");
setTimeout(() => el.classList.remove("animated"), 1000);    
let area = document.createElement("textarea");
area.value = copyCode.textContent;
document.body.appendChild(area).select();
document.execCommand("copy");
area.remove();
});     
});




Всё работает. При клике на кнопку, копируется содержимое, дочернего элемента с классом .button__content
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
Fundraise Up Санкт-Петербург
от 2 500 до 3 500 $
Admitad Projects Москва
от 130 000 до 200 000 ₽
от 5 000 до 6 500 $
28 мая 2020, в 23:15
3000 руб./за проект
28 мая 2020, в 21:46
20000 руб./за проект