How can I copy text (
) to the clipboard on an image click using jQuery in the most simple way?

Question

I am looking for the simplest possible solution to copy text within a html p tag on an image click to the clipboard.

I tried some small (code wise) solutions from this thread Click button copy to clipboard using jQuery, but it just won't copy the text. In my case I need it to work with an image click rather than a button click.

$("#clipboardImage").click(function() {
    $("#didText").select();
    document.execCommand("copy");
    alert("Text copied")
});

#didText {
color: #1816A9;}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<html>
     <div id="didContainer">
        <p id="didText" type="text">I hopefully end up in the form field anytime soon!</p>
        <img id="clipboardImage" src="" alt="Click me, to bring him down!">
     </div>
<br>
<form>
   Worked?
   <input type="text" name="copied Text">
</form>
</html>

You could put the image in a button? – evolutionxbox Dec 13 '19 at 11:31 — evolutionxbox, Dec 13 '19 at 11:31

Plastic · Accepted Answer · 2019-12-13T12:01:47.107

If I understand well your goal is to put the text from the p tag into the input field.

Just select the text with JQuery .text() and put it into the input filed as a value

EDIT

So, if the main goal is to put some text from an element to the clipboard I suggest to use a dedicated function, there's a workaround that create an invisible and readonly textarea and use it as a "proxy" to store and copy the text to your clipboard.

NB: to avoid passing the text to the input field just get rid of $("input").val(text); row.

    function copyToClipboard (str) {
        var el = document.createElement('textarea');    // Create a <textarea> element
        el.value = str;                                 // Set its value to the string that you want copied
        el.setAttribute('readonly', '');                // Make it readonly to be tamper-proof
        el.style.position = 'absolute';                 
        el.style.left = '-9999px';                      // Move outside the screen to make it invisible
        document.body.appendChild(el);                  // Append the <textarea> element to the HTML document
        var selected = document.getSelection().rangeCount > 0 ? document.getSelection().getRangeAt(0) : false;                                    // Mark as false to know no selection existed before
        el.select();                                    // Select the <textarea> content
        document.execCommand('copy');                   // Copy - only works as a result of a user action (e.g. click events)
        document.body.removeChild(el);                  // Remove the <textarea> element
        if (selected) {                                 // If a selection existed before copying
            document.getSelection().removeAllRanges();  // Unselect everything on the HTML document
            document.getSelection().addRange(selected); // Restore the original selection
        }
  };



$("#clipboardImage").click(function() {
    var didText = $("#didText");
    var text = didText.text();
    copyToClipboard(text);
    $("input").val(text);
    alert("Text copied")
});

#didText {
color: #1816A9;}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<html>

<div id="didContainer">

<p id="didText" type="text">I hopefully end up in the form field anytime soon!</p>
<img id="clipboardImage" src="" alt="Click me, to bring him down!">

</div>

<br>

<form> 

Worked?
<input type="text" name="copied Text">

</form>

</html>

Thanks for the reply! But the intension is to have it copied to the clipboard. So I just add execCommand to your solution? — Jonas, Dec 13 '19 at 11:40
I will, no worries :-) I guess I was a bit misleading. Actually I want just to copy the text to the clipboard, not to the form. The form was just part of the snippet to verify fast. I don't have a form at all in my case. Could you maybe edit the answer without a form included? Thanks! — Jonas, Dec 13 '19 at 11:45

How can I copy text () to the clipboard on an image click using jQuery in the most simple way?

1 Answers1

How can I copy text (
) to the clipboard on an image click using jQuery in the most simple way?