如何复制部分 <p> 文字点击

Question

I have an HTML document with a 'p' element which I would like a portion of copied to the clipboard when the whole element is clicked.

<p class="pageID"><strong>Page ID: </strong>#A16</p>

Which returns: PageID: #A16

I want to have it so when I click anywhere on this line the page ID (#A16) is copied to the clipboard but nothing else. I've seen some similar questions on here and tried a bunch of different JavaScript solutions but nothing is working.

Any ideas?

Thanks!

Answer 1

You could try something like this:

<p class="pageID"><strong>Page ID: </strong><span id="toCopy">#A16</span></p>

<script>
document.querySelector(".pageID").addEventListener('click', function() {
   var temp_input = document.createElement("INPUT");
   temp_input.value = document.querySelector('#toCopy').innerHTML;
   temp_input.select();
   document.execCommand("copy");
});
</script>

No jQuery needed!

Answer 2

Off the top of the head, I'd wrap whatever you're trying to copy into it's own element and copy the text of the element.

ex: <p class="pageID"><strong>Page ID: </strong><span class="your-class-name">#A16</span></p>

Answer 3

You should wrap that text in element with some id and then focus on it and copy like this

var el = document.getElementById("myText");
el.select();
document.execCommand("copy");

Answer 4

You can do something like this:

<div id="myId"><p class="pageID" id="myElement"><strong>Page ID: </strong>#A16</p></div>

<script>
$('#myId').onClick(function() {
  var copyText = document.getElementById("myElement");
  copyText.select();
  document.execCommand("copy");
  alert("Copied the text: " + copyText.value); // do whatever you want with this text.
});
</script>