Cool Javascript Copy to Clipboard Crossbrowser

Version 1.2b

Last updated on
Subscribe to Internet Tips and Tools Feed

Here is a Copy to Cliboard Crossbrowser Javascript function that works for Desktop and Mobile browsers.

Features

  • One click "Copy to Clipboard" for Internet Explorer 4+, Chrome 42+, Firefox 41+, Opera 29+, and mobile browsers: Chrome for Android 42+, Firefox Mobile 41+, iOS 10+.
  • One click "Select All" for desktop browsers: Safari, older Chrome and older Firefox. When the user presses the button the text in a form or non-form element is selected and a tooltip displays informing the user to "Press CTRL+C to copy".
  • Two click "copy to clipboard" for older iOS, iPhone Safari. First click selects all text in a form or non-form element and then the built-in browser "Copy" button displays for the user to click on.
  • Two click "copy to clipboard" for Android Internet Browser. First click selects all text in a form or non-form element and then the built-in browser "Copy" button displays for the user to click on.

Paste Features

  • One click "Paste" button for Internet Explorer 4+.
  • Paste button for all other desktop browsers (Chrome, Firefox, Safari) selects all text in a form or non-form element and a tooltip displays informing the user to "Press CTRL+V to Paste".
  • Two click "Paste" button for mobile browsers: Android Internet Browser, iOS, iPhone Safari. Clicking the button selects the element and the built-in browser "Paste" button displays for the user to click on
  • Unfortunately Chrome for Android requires three clicks. First the user clicks the "Paste" button which blanks the contents of the element and focuses on the element which causes the blue caret pointer to display and a tooltip displays informing the user to "Click blue tab then click Paste".

Demonstration

Here is a form textarea to test copying of form data with:

Here is a non-form element (a div) to test copying with:


Here is a textarea you can test pasting into:

Here is a contentEditable div to test pasting into:


dlc_b

Download

Downloaded 0 times.
Please make a donation to reveal the download link.

How to Use

First create your html form or non-form elements and give them an id. Example:

Next put this line in your html file after all your copyable elements:

Then you can use the copy and paste functions in a few ways:

  1. If you want the script to create a "Copy to Clipboard" button for you immediately after the element then use this code below. Note: If the browser does not support direct copy to clipboard then the button created will read "Select All".
  2. Or you can design your own "Copy to Clipboard" button like so:
    <button onclick="select_all_and_copy(document.getElementById('textbox'))">Copy to Clipboard</button>
  3. Or if you want the text to copy to clipboard when a user clicks the element then add an 'onclick' like this:
    <div id="textbox" onclick="select_all_and_copy(this)">content</div>
  4. Or if you want the text to copy to clipboard when an element receives focus then add an 'onfocus' like this:
    <textarea id="textbox" onfocus="select_all_and_copy(this)">content</textarea>
  5. For a Paste button just design your own button like this:
    <button onclick="paste(document.getElementById('textbox'))">Paste</button>

History

3/5/2018 - Version 1.2b - Bug Fix: Previously the tooltip opacity would make the tooltip not appear when it was done displaying. Even though the tooltip was invisible it would get in the way of a user trying to use the mouse to highlight some text in the textarea or to click in the textarea. Fixed by changing the display of the tooltip to none. Also changed the zIndex of the tooltip to be in front of other elements.

3/5/2018 - Version 1.2a - Added tabindex=0 to "Copy to Clipboard" button created by the function make_copy_button() for accessibility.

3/4/2018 - Version 1.2 - Added role="button" to "Copy to Clipboard" button created by the function make_copy_button() for accessibility.

4/14/2016 - Version 1.1 - Bug Fix: Form elements were limited to selecting 9999 characters because of an iOS limitation. Fixed on lines 75-76 and 134-135 by detecting if iOS and device and increasing the character selection on iOS devices to 999999. The bug originally has to do with an iOS limitation of only being able to select characters in form elements using el.setSelectionRange();

3/18/2016 - Version 1.0 - Cool Javascript Copy to Clipboard Crossbrowser created

Last updated on April 2, 2018
Created on March 18, 2016

Back to www.seabreezecomputers.com
Subscribe to Internet Tips and Tools Feed        

User Comments

There are 22 comments.

Displaying first 50 comments.

1. Posted By: rern - - April 9, 2017, 1:17 am
One click select_all_and_copy works on iOS10 just fine.

2. Posted By: Ron Korving - - July 5, 2017, 8:49 pm
Great job figuring this one out for iOS :)
It would be amazing if you would release this as a module on NPM.

3. Posted By: sasho - sasho.new@gmail.com - July 17, 2017, 6:44 am
Hi and thank you for great and most useful script.

I've been trying to find something like this for some time now and all I come up with was some flash version and never had time to write it on my own. The truth is I'm not so good with javascript too :(

I've also manage to add some basic localization support :) using simple string arrays. If anyone need this feel free to write...


4. Posted By: Krish - - August 11, 2017, 8:38 am
Am using it with anchor tag as below.
<a target="_blank">
<img src="/images/copy.png">
</a>

Its works with Desktop with out any issue, but in IOS Mobile Safari/Chrome Browsers the page is getting pulled to down.

5. Posted By: Jeff - - August 11, 2017, 10:15 am
Hi Krish,

I'm sorry, your code is being stripped out of our comment area for security reasons because you did not surround it with <code> </code> tags. Can you send it again to me in a reply to this email?

Even better would be if you could send me a link to the webpage then I can see in more detail what is happening.

Jeff
www.seabreezecomputers.com/

6. Posted By: Clay H - - August 30, 2017, 7:42 am
Great script! I have one issue and one request.
Issue: This script doesn't work in Internet Explorer 11.
Request: Is this possible to copy link as active HTML link. Meaning if we copied "1231231234" to clipboard and then paste into MS Word or Outlook, it would be a true link (it would appears as 1231231234 with underscores).

Thank you for the great script!=)

7. Posted By: Jeff - - August 30, 2017, 12:35 pm
Hi Clay H,

It works for me in Internet Explorer 11. But depending on your IE security settings, it may prompt you when you click the button with: "Do you want to allow this webpage to access your clipboard?" Or maybe you have your security settings set really high and it is set to disallow clipboard access without prompting. To change that:
1. Go to Tools -> Internet Options.
2. Go to Security tab.
3. Select Internet zone, then click on Custom levelů button.
4. Scroll down to Scripting section (at the bottom few).
5. Under Allow Programmatic clipboard access option, check or select (tick) Enable. Default action for this option is Prompt, which cause the pop-up message whenever there is any attempt to access the Clipboard.
6. Click Ok twice to exit from Internet Options.

Also, active HTML links and any other HTML will copy as HTML if you copy the contents of a DIV with active HTML.

Jeff
www.seabreezecomputers.com/

8. Posted By: shivakumar PM - - November 2, 2017, 9:53 am
Can anbody help in removing the toast or info text "copied to clicoboard" when we click on button.

Thanks,
Shiva

9. Posted By: Jeff - - November 2, 2017, 9:54 am
Hi Shiva,

To make the script not display the tooltip "Copied to clipboard!" change line 119 to look like this:

// tooltip(el, "Copied!");

And then change line 141 to look like this:

if (successful) { /* tooltip(el, "Copied to clipboard."); */ }

Jeff
www.seabreezecomputers.com/

10. Posted By: shivakumar PM - - November 7, 2017, 9:15 am
Thanks Jeff,

11. Posted By: Mark Chaney - - December 5, 2017, 8:02 pm
Thanks for this script. I really would like an npm package as well. Makes things so much easier to implement and maintain updates, etc.

12. Posted By: Pete - - December 18, 2017, 7:36 pm
Is there a way to have the script copy the a value in an achor or div? ie: <a href="#" value"text to be copied">Click Here To copy</a>

I want the end user to be able to click a link that says copy to clip board, but the value that is getting copied is actually a url

13. Posted By: Jeff - - December 18, 2017, 10:15 pm
Hi Pete,

The javascript copy function can only copy text that can be selected on the screen. As a safety precaution the standard in most browsers is to not let it work if the text visibility is hidden or if the the css display is set to none. However, this workaround might work: If you put the text to be copied in a div that is positioned offscreen. For example:

<div id="my_link" style="left: -1000px; position: absolute">http://example.com</div>
<a href="#" onclick="select_all_and_copy(document.getElementById('my_link')); return false;">Click here to copy</a>

Jeff
www.seabreezecomputers.com/

14. Posted By: Pete - - December 19, 2017, 8:06 am
Brilliant idea and it worked. I had to change the position to 2000 as the gnarly string of the url was showing. I take it that the confirmation popup is happening off screen as well? It would be nice if the end user knew the action was done.

15. Posted By: Jeff - - December 19, 2017, 11:38 am
Hi Pete,

You will have to change a lot of code to get the "Copied" tooltip to display:
First add "event," to this line:
<a href="#" onclick="select_all_and_copy(event, document.getElementById('my_link')); return false;">Click here to copy</a>

Then in copy2clipboard.js change the function select_all_and_copy(el) at the top to this:

function select_all_and_copy(e, el)
{
e=e || window.event;
var el2=e.target || e.srcElement;

Then in the select_all_and_copy function there will be four places that you will see a call to "tooltip(el,".
Change each one to tooltip(el2,

Jeff
www.seabreezecomputers.com/

16. Posted By: Rex - - April 20, 2018, 4:58 pm
Hi Jeff
Fantastic job!
It always works amazing for me.

This time I need the script to copy the content from 2 different divs which can not be merged in a single one.

Or if possible copy the content from one div and always attach an extra short line of text to the copied content.

Do you think any of thee 2 options is possible?

Thanks a lot in advance!
Very look forward for your reply!
Rex.

17. Posted By: Rex - - April 20, 2018, 5:06 pm
Sorry, typo:
Do you think any of this* 2 options is possible?

18. Posted By: Jeff - - April 21, 2018, 12:11 am
Hi Rex,

Could you put the two div's in one parent div? Something like:

<div id="top_div">
<div>Content 1</div>
<div>Content 2</div>
</div>

And then copy "top_div"? If that doesn't work could you add to the beginning of the select_all_and_copy(el) function something like:

var original_content=el.innerHTML;
el.innerHTML +="Added message";

Then at the bottom of the function, if you want to restore the original content to the div:

el.innerHTML=original_content;


Jeff
www.seabreezecomputers.com/

19. Posted By: Rex - - April 21, 2018, 5:56 pm
Jeff,
THANKS A LOT!
Works charmingly!
How did I never thought about two divs in a parent one?
Spent days editing the script instead hahaha.

You are great!
Best wishes and kindest greetings!
Rex

20. Posted By: Lucas - - September 8, 2018, 1:21 pm
It's simple and working great ! thanks for sharing this.

It works on Desktop and Android
The only thing is I can't figure out why I can't make it work on Iphone 5 IOS11.
Your demo page works well on Iphone 5 IOS11 but when I apply the code to my page it works with all other devices but not on Iphone 5 IOS11.

Anyone had this issue or have any clue what it could be ?
I use wordpress.

Here my page test :
kawamboo.com/test-7/
password : temp2018

Cheers

21. Posted By: Jeff - - September 8, 2018, 5:46 pm
Hi Lucas,

Your test site worked good for me on iPhone SE iOS 10.2.1. I pressed the button and it copied to clipboard: Mary had a little lamb.

Jeff
www.seabreezecomputers.com/

22. Posted By: Lucas - - October 25, 2018, 1:55 pm
Hi Jeff thank you so much for having checked that so quick. Good to know it works on your end. Something might be off with my iPhone then.