CODEWITHSUNDEEP
javascriptjquery
santa
santa

Reputation: 12512

Trying to copy code from textarea with button click

I'm trying to add a snippet of code to let my users copy some link from textarea. Pretty basic, and while I get success response when I try to paste I see that it didn't copy it. What am I missing?

<textarea id="shareInfo" class="form-control" rows="10" disabled="disabled"><a href="'.$pgURLcanon.'"><img src="'.$meta_image.'" alt="'.$_SESSION['articles'][$article_seo]['title'].'"></a>

</textarea>
        <button onclick="copyInfoCode()" class="btn btn-success mt-2">Copy code</button>

        <script>
            function copyInfoCode() {
                $("#shareInfo").select();

                try {
                  var success = document.execCommand("copy");
                  console.log("Copying " + (success ? "Code copied successfully." : "Copy failed, please try again"));
                } catch (err) {
                  console.log("Copying failed");
                }
            }
        </script>

Upvotes: 3

Views: 379

Answers (2)

amrender singh
amrender singh

Reputation: 8239

The execCommand will not work on disabled textarea. Instead of disabled use readonly.

function copyInfoCode() {
    $("#shareInfo").select();

    try {
        var success = document.execCommand("copy");
        console.log("Copying " + (success ? "Code copied successfully." : "Copy failed, please try again"));
    } catch (err) {
        console.log("Copying failed");
    }
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

<textarea id="shareInfo" class="form-control" rows="10" readonly><a href="'.$pgURLcanon.'"><img src="'.$meta_image.'" alt="'.$_SESSION['articles'][$article_seo]['title'].'"></a>
</textarea>
 <button onclick="copyInfoCode()" class="btn btn-success mt-2">Copy code</button>

Upvotes: 2

Giddy Naya
Giddy Naya

Reputation: 4658

Try the below snippet. You can use on any element besides textarea and also without jQuery.

function shareInfoClick(){  copyToClipboard(document.getElementById("shareInfo").value);
}

function copyToClipboard(str) {
            const 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
            const selected =
                document.getSelection().rangeCount > 0        // Check if there is any content selected previously
                    ? document.getSelection().getRangeAt(0)     // Store selection if found
                    : 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
            }
            alert("Text copied to clipboard");
        }
<!-- make read-only instead of disabling -->
<textarea id="shareInfo" class="form-control" rows="10" readonly><a href="'.$pgURLcanon.'"><img src="'.$meta_image.'" alt="'.$_SESSION['articles'][$article_seo]['title'].'"></a>

</textarea>
<button onclick="shareInfoClick()" class="btn btn-success mt-2">Copy code</button>

Upvotes: 0

Related Questions