Back

Explore Courses Blog Tutorials Interview Questions
0 votes
2 views
in Web Technology by (40.7k points)

How do I copy the text inside a div to the clipboard? I have a div and need to add a link that will add the text to the clipboard. Is there a solution for this?

<p class="content">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</p>

<a class="copy-text">copy Text</a>

After I click copy text, then I press Ctrl + V, it must be pasted.

1 Answer

0 votes
by (40.7k points)

You can copy text to the clipboard in most browsers because most browsers have the ability to programmatically copy a selection of text to the clipboard using document.execCommand("copy") that works off a selection.

As with the other actions in a browser (like opening a new window), then copy to the clipboard can only be done via a specific user action (like a mouse click). For example, it cannot be done via a timer.

You can follow this example:

document.getElementById("copyButton").addEventListener("click", function() {

    copyToClipboard(document.getElementById("copyTarget"));

});

function copyToClipboard(elem) {

  // create hidden text element, if it doesn't already exist

    var targetId = "_hiddenCopyText_";

    var isInput = elem.tagName === "INPUT" || elem.tagName === "TEXTAREA";

    var origSelectionStart, origSelectionEnd;

    if (isInput) {

        // can just use the original source element for the selection and copy

        target = elem;

        origSelectionStart = elem.selectionStart;

        origSelectionEnd = elem.selectionEnd;

    } else {

        // must use a temporary form element for the selection and copy

        target = document.getElementById(targetId);

        if (!target) {

            var target = document.createElement("textarea");

            target.style.position = "absolute";

            target.style.left = "-9999px";

            target.style.top = "0";

            target.id = targetId;

            document.body.appendChild(target);

        }

        target.textContent = elem.textContent;

    }

    // select the content

    var currentFocus = document.activeElement;

    target.focus();

    target.setSelectionRange(0, target.value.length);

    

    // copy the selection

    var succeed;

    try {

      succeed = document.execCommand("copy");

    } catch(e) {

        succeed = false;

    }

    // restore original focus

    if (currentFocus && typeof currentFocus.focus === "function") {

        currentFocus.focus();

    }

    

    if (isInput) {

        // restore prior selection

        elem.setSelectionRange(origSelectionStart, origSelectionEnd);

    } else {

        // clear temporary content

        target.textContent = "";

    }

    return succeed;

}

input {

  width: 400px;

}

<input type="text" id="copyTarget" value="Text to Copy"> <button id="copyButton">Copy</button><br><br>

<input type="text" placeholder="Click here and press Ctrl-V to see clipboard contents">

Here's a little more advanced demo: https://jsfiddle.net/jfriend00/v9g1x0o6/

And, you can also get a pre-built library that does this for you with clipboard.js.

If you are directly copying to the clipboard via JavaScript it'll not be permitted by any modern browser for security reasons. You can just use the Flash capability for copying to the clipboard that can only be triggered by a direct user click.

As mentioned already, ZeroClipboard is a popular set of code for managing the Flash object to do the copy. I've used it. If Flash is installed on the browsing device (which rules out mobile or tablet), it will work.

Browse Categories

...