Cool Javascript Copy to Clipboard Crossbrowser

Version 1.1

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

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 July 6, 2017
Created on March 18, 2016

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

User Comments

There are 11 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: Krish - - August 11, 2017, 8:40 am




6. 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/

7. 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!=)

8. 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/

9. 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

10. 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/

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