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+.
  • 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 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.
This download is a free trial. If you continue to use it then the cost is a one time fee of 25.00 USD.

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

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

User Comments

There are 1 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.