Cool Javascript Copy to Clipboard Crossbrowser

Here is a Copy to Clipboard 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:

Read Only

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:

Download

How to Use

First create your html form or non-form elements and give them an id. Example:
<div id="textbox">Mary had a little lamb</div>

Next put this line in your html file after all your copyable elements:
<script type="text/javascript" src="copy2clipboard.js"> </script>

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".
   <script type="text/javascript"> make_copy_button(document.getElementById("textbox")); </script>
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

8/2/2019 - Version 1.2c - It seems that some iOS 12 devices are defaulting to "Request Desktop Site" (Desktop mode). In Desktop mode the useragent no longer has "iphone" in it and copy is not working in textareas. Therefore the code has been updated to no longer detect "iphone" in the useragent but instead to apply el.setSelectionRange(0, 999999); in every browser. This seems to fix the problem in iOS 12. Also changed readOnly to true to prevent iOS from displaying the keyboard when copying from a textarea. However, it still displays the keyboard when copying from a contentEditable element.

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 May 17, 2024
Created on March 18, 2016