Copy Text to Clipboard in HTML Page using JavaScript

I’ve got a problem on one of my sites:

I have a unique identifier displayed on one page, which I need to make it easy to copy to clipboard.

After looking online, I’ve found three approaches using only JS.

Clipboard.js

Clipboard.js is a new (September 2015) approach which uses only JS to copy the text transparently (using the Selection/execCommand APIs).

The code is as simple as:

where trigger is a CSS selector.

[Thanks Gabriel Gularte].

Popup approach

This method opens a dialog box with a text. The code is as follows:

  1. HTML
  2. JavaScript

When the text is clicked, a dialog with 'bobo' will pop up. The beauty of it is that text is already selected; all you need is CTRL+C (CMD+C on macs) and ENTER to close the dialog.

Select in control

I can display my UID in an <input /> code. If I write it as a read-only field, then I can select it. A code like this:

will do it. Adding a helper text under (to tell people to perform a CTRL+C) should solve the problem (too).

References

HTH,


A little experiment: If you find this post and ad below useful, please check the ad out :-)




15 thoughts on “Copy Text to Clipboard in HTML Page using JavaScript

  1. HI!

    tks for the assistance, that was the first in many that i tried and not sucessful, but i did whit yours :))

    But, in my , i have a “random text creator” activated by a button:

    This is the code:

    And this is the JS for random that i’m using:

    var randomStrings = [
    “text01”,
    “text02”,
    “text03”,
    “text04”,
    “text05”
    // Note: No comma after last entry
    ];
    function RndMsg() {
    var msg = randomStrings[Math.floor(Math.random()*randomStrings.length)];
    document.getElementById(‘test’).innerHTML = msg;
    }

    PLEASE, if i would do anything to you help me whit this, i do!!!
    i’m from Brazil, please, help me :))

    tks very mutch, byee

    1. Thanks for the comment :)

      Hmm. I don’t understand what your problem is. Is it that your button activation code doesn’t work, or that the RndMsg() function gets called but there’s no effect? For the second variant, your code will work only if you already have a HTML element (e.g. a span) with the it “test” in it. Otherwise, you have to insert it. Have a look at this link on SO. This should give you a best practice to insert text element in HTML.

  2. I am creating coupon website for that I need your help.
    When somebody wants to copy the Coupon Code in my site. I want to display a text “Copy Code” besides Coupon Code (highlighted in color). When somebody click on it, then it displays a message “Copied”. That person then come to product site and paste that copied code, it must be copied. Can you please help me to create a source code for it?

    1. It should be as simple as processing the onClick() for the text/button. I there you should call the copy code.

  3. How can we clear the clipboard ? That is how can we clear the text copied in the clipboard ?

  4. Hi I need your help.
    So I am creating a simple offline web page which would have some txt and then a small empty box made with html form code. Purpose of this page is it will act as a template for sending emails. So I send emails that have a basic format but the only thing that will change would be customers name and reference number. So instead of editing email with name and reference number, I am creating a web page that will have 2 boxes for the data that will be different and rest of the email info would be in txt. I need your help on how do I put a copy button down at the bottom that will then copy the normal txt in the template and the data that I have entered in the box.
    To explain this better here what it looks like
    Hi ,
    Your refund is processed. Your reference number is
    Regards,
    John

    When I press the copy button I want the txt with the value I have typed in the box to be copied .
    Then I can just paste it into email and it’s done.

    I would really appreciate any help on this. Thanks…

    1. I think you’re better off with creating placeholders like WordPress editor has. Then, on submit, you replace the text. You can offer a live preview through JavaScript and validate on the server side.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Scroll to top