click to copy paragraph content

Question

I was tried to copy paragraph content when I click on it, I wrote this code but it's not working correctly

here the code:

$('p').click(function (e) {
    e.preventDefault();
    var $temp = $("<input>");
    $temp.val($(this).html()).select();
    document.execCommand("copy");
    $temp.remove();
});

I think the element must be visible on the page to to get `$temp.val($(this).html()).select();` to work. — Adarsh Mohan, Mar 01 '19 at 20:45
Just add `$("body").append($temp);` before you call the `$temp.val($(this).html()).select();` and you're golden. https://jsfiddle.net/asek26nw/ — Tim Lewis, Mar 01 '19 at 20:47
Take a look here. https://developer.mozilla.org/en-US/docs/Web/API/Selection/addRange — Bibberty, Mar 01 '19 at 20:48

score 1 · Answer 1 · answered Mar 01 '19 at 20:53

1

Here, this adds a click listener and filters on P tags. When clicked it will copy to clipboard.

const copyElement = (e) => {
  let selection = window.getSelection();
  if (selection.rangeCount > 0) {
    selection.removeAllRanges();
  }
  
  let range = document.createRange();
  range.selectNode(e);
  selection.addRange(range);
  document.execCommand('copy');
};

document.addEventListener('click', (e) => {
  if(e.target.matches('p')) {
    copyElement(e.target);
  }
});

<p>Testing</p>
<div>No copy</div>
<p>Test2</p>

answered Mar 01 '19 at 20:53

Bibberty

4,670
2
8
23

i love it works great... I am trying to add a copy image on click.... i replaced 'p' with 'img' in 2nd to last line and it select the image with an outline but my clipboard doesnt copy the image, its just blank... any tweaks you can add for images as well? – jon rios Apr 13 '20 at 21:14

click to copy paragraph content

1 Answers1