скопировать текст из <p></p> в буфер обмена с помощью кнопки и JS?

Question

У меня в html этот текст:

<button>copy text!</button>
<p>blah</p>

Я хочу, чтобы текст в тегах p копировался в буфер обмена, когда я нажимаю кнопку. В каждом онлайн-руководстве под солнцем говорится об использовании тегов textArea, но я не хочу их использовать. Почему его нельзя просто скопировать прямо из тегов p?

Answer 1

Теперь вы можете использовать API буфера обмена для записи в буфер обмена без использования элемента textarea (обратите внимание, что в настоящее время он находится в статусе рабочего черновика, поддерживается во всех широко используемых браузерах, кроме IE): Clipboard.writeText ()

<button>copy text!</button>
<p>blah</p>

const button = document.querySelector( 'button' );
const elementToCopy = document.querySelector( 'p' );
const textToCopy = elementToCopy.innerText;

function copy ( text ) {
  navigator.clipboard.writeText( text )
}

button.addEventListener( 'click' , () => {
  copy( textToCopy )
})

Теперь вы можете скопировать содержимое вашего p в буфер обмена.

Answer 2

Я нашел обходной путь, который кажется преступлением против html, но он работает. По сути, мне все-таки нужно использовать textarea, создав его с содержимым тегов

, а затем сразу же уничтожить элемент textarea. Это просто смешно.

function copyElementText(id) {
  var text = document.getElementById(id).textContent
  var elem = document.createElement("textarea");
  x = document.body.appendChild(elem);
  elem.value = text;
  elem.select();
  document.execCommand("copy");
  x.remove()
  alert("Copied the text: " + text);
}

Answer 3

Это может быть легко достигнуто с помощью Clipboad Js. У них есть хорошая документация, за которой вы можете следить.