Question 335219 in Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – Cannot copy data attribute into clipboard

I want to copy the text of a data attribute into clipboard. I took reference from this.

Here is my html code:-

<a class="text-info mr-2" href="javascript:void(0);" data-copy-to-clipboard="Hello World" onclick="coptToClipboard(this);"><i class="bx bx-copy me-1"></i></a>

This is my javascript code:-

function coptToClipboard(obj) {
    var text = $(obj).attr('data-copy-to-clipboard');
    document.execCommand('copy', false, text);
}

However the text isn’t getting copied. If I use alert(text); in the same function, I am getting "Hello World" in the alert message.

How can I fix this?

Tags:

2

Answers


  1. 0

    The document.execCommand(‘copy’) approach is now considered obsolete and may not work in some modern browsers. Instead, you can use the newer Clipboard API for this purpose.

    function copyToClipboard(obj) {
    var text = $(obj).data('copy-to-clipboard');

    // Using Clipboard API
    navigator.clipboard.writeText(text)
        .then(() => {
            console.log('Text successfully copied to clipboard:', text);
        })
        .catch((err) => {
            console.error('Unable to copy text to clipboard', err);
        });
}

// Alternatively, using jQuery
$(document).ready(function () {
    $('.text-info').on('click', function () {
        var text = $(this).data('copy-to-clipboard');

        // Using jQuery and document.execCommand
        var $tempInput = $('<input>');
        $('body').append($tempInput);
        $tempInput.val(text).select();
        document.execCommand('copy');
        $tempInput.remove();

        console.log('Text successfully copied to clipboard:', text);
    });
});
        <script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
    <a class="text-info mr-2" href="javascript:void(0);" data-copy-to-clipboard="Hello World" onclick="copyToClipboard(this);"><i class="bx bx-copy me-1"></i>Copy Text</a>
    Login or Signup to reply.
  2. 0

    It seems like you’re using jQuery to retrieve the value of the data-copy-to-clipboard attribute, but you’re trying to execute the document.execCommand('copy', false, text); command, which is not the correct way to copy text to the clipboard in modern browsers. Instead, you should use the Clipboard API.

    function copyTextToClipboard(text) {
    // Create a temporary textarea element
    var textarea = document.createElement('textarea');
    // Set the value of the textarea to the text to be copied
    textarea.value = text;
    // Append the textarea to the body
    document.body.appendChild(textarea);
    // Select the text in the textarea
    textarea.select();
    // Copy the selected text to the clipboard
    document.execCommand('copy');
    // Remove the textarea from the DOM
    document.body.removeChild(textarea);
}
    <a href=void:0; onclick="copyTextToClipboard('Hello world!'); this.textContent='copied!'">try to copy</a>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search