A New Approach To Copy Text To Clipboard – Clipboardjs

text to clipboard in jQuery
File Size:27.94 KB
Views Total:323
Last Update:January 4, 2018
Publish Date:January 4, 2018
Official Website:Go to website
License:MIT

By copying a text to the clipboard is not a hard process. It does not require many steps to copy the input texts to clipboard. It is in easy steps to configure or hundreds of kBs to load but the most of all it does not depend on any of the flash or any of the bloated framework. It covers the div area.

How to use :

1. Add jQuery Library with clipboard.js link :

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

<script src="dist/clipboard.min.js"></script>

2. Add To use the data-clipboard-text data attribute with use data-clipboard-target data attribute :

<div>Hello Copy 1</div>
    <button class="btn" data-clipboard-action="copy" data-clipboard-target="div">Copy </button>

3. Finally, you’ll want to instantiate it with all elements with a class of clipboard:

$( document ).ready(function() {
  var clipboard = new Clipboard('.clipboard');
});

Done 🙂

Change Log

v1.7.1
Move focus to trigger instead of simply blur()ing

v1.7.0
Adds container option

v1.6.1
Prevents Node.js environment from throwing an error

v1.6.0
Adds Clipboard.isSupported() static method
Prevents scroll jump on iOS when using data-clipboard-text
Prevents keyboard from opening on iOS when using data-clipboard-target

v1.5.16
Ensures that event delegation works with multiple documents (a page with iframes)

v1.5.15
Removes Babel loose mode

v1.5.14
Updates delegate package which removes two external dependencies
Prevents React and Angular tests from failing

v1.5.13
Prevents page from scrolling after using data-clipboard-text on iOS

v1.5.12
Fixes a bug that unable to remove fake event listener

v1.5.11
Fixes a regression caused by
Changes fake element position from fixed to absolute
Fixes a remove event handler that was not being called

v1.5.10
Removes error message when target/text attributes are null, undefined, or false. This is particularly useful when using functions
Throws error when disabled or readonly attributes are used on target element

v1.5.9
Upgrades to Babel 6
Fixes fake element position

v1.5.8
Resets invisible <textarea> box model
Prevent auto-zooming on iOS devices

v1.5.7
Fixes a bug when updating Babel 5 to 6

v1.5.6
Adds support for RTL
Fixes the "unexpected token function" bug on IE9 and Android

v1.5.5
Adds support for text selection on iOS Safari for <input> and <textarea> elements
Fixes a bug where non-editable elements were being focused, causing elements to not be selected on Firefox

v1.5.4
Fix a bug where events have already been bubbled up

v1.5.3
Removes the need for Browserify users to transpile ES6 code

v1.5.2
Removes the need for Webpack users to transpile ES6 code

v1.5.1
Fixes regression on v1.4.3 that caused multiple elements to not be selected

v1.5.0
Allows HTML elements to be passed in the constructor
Fixes regression on v1.4.3 that caused selected text to not be returned on editable elements

v1.4.3
Adds support for text selection on iOS Safari for <input> and <textarea> elements

v1.4.2
Fix "Discontiguous selection is not supported" error on Chrome

v1.4.1
Prevent Firefox < 41 scrolling to bottom of page when using text attribute

v1.4.0
Add destroy method
Fix bower import for those who wiredep
Add support for multiline value when using text attribute

v1.3.1
Adds CommonJS support on Node environments

v1.3.0
Adds UMD support

v1.2.0
Improves data-clipboard-target to support any selector instead of ID beab7bc
Adds support to set action/target/text via function

v1.1.0
Includes data-clipboard prefix on each data attribute in order to avoid conflicts
data-action > data-clipboard-action
data-target > data-clipboard-target
data-text > data-clipboard-text