从复制文本<p></p>使用按钮和 JS 到剪贴板？

Question

I have in my html this text:

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

I want the text in the p tags to be copied to clipboard when I click the button. Every tutorial online under the sun talks about using textArea tags but I don't want to use those. Why can't it just be copied this way directly from p tags?

Answer 1

You can now use the clipboard API to write to clipboard without using the textarea element (please note that it is currently in working draft status, supported in all commonly used browsers, except 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 )
})

You should now be able to have the content of your p copied to clipboard.

Answer 2

It can easily be achieved with ClipboadJs . They have a good documentation you can follow.

Answer 3

Well I found this workaround which seems like a crime against html but it works. Essentially I have to use a textarea after all by creating it with the contents of the <p> tags and then immediately destroy the textarea element after. This feels ridiculous.

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);
}