BT

Lightweight JavaScript Library Offers Flash-Free Clipboard Integration

| by David Iffland Follow 4 Followers on Oct 01, 2015. Estimated reading time: 1 minute |

Zeno Rocha has released Clipboard.js, a JavaScript library solely devoted to copying text from a webpage to the local computer's clipboard.

On every GitHub repository page, there's a widget in the sidebar that displays the repo's HTTPS clone URL. There's a button next to it that, when clicked, copies the repo's URL into the user's clipboard. GitHub uses a library called ZeroClipboard. The problem is that this is done using an invisible Flash movie and Flash is getting the cold shoulder from browser vendors.

Screen shot of the GitHub copy to clipboard button

Earlier this year, Firefox blocked Flash by default, requiring users to explicitly approve the use of Flash to copy something to the clipboard.

An article appeared on the Mozilla Hacks that demonstrated the use of the document.execCommand() API. According to MDN, execCommand "allows one to run commands to manipulate the contents of the editable region." Until version 41 of Firefox, the "cut" and "copy" commands were disabled.

Rather than let any JavaScript code copy text to the user's clipboard at will, browsers restrict such events to user initiated actions. If the code attempts to copy text without the user's explicit action, the call fails.

Rocha took the idea of using execCommand a step further and integrated the Selection API as well. By combining these technologies, Clipboard.js offers a multi-purpose, lightweight JavaScript library, with a useful API for developers. To connect a button to the library, developers declare what elements should fire the clipboard:

var clipboard = new Clipboard('.btn');

While the library is supported on a majority of browsers, Safari does not yet support the cut and copy commands.

Developers of ZeroClipboard have discussed switching to this method for their library, falling back to Flash where the API isn't supported. James Green, contributor to ZeroClipboard said of Clipboard.js, "It's a good light option but I know there will definitely still be a need to make ZeroClipboard support HTML5 but fallback to Flash for many consumers out there."

The HTML5 Clipboard API is still a work in progress and enjoys only partial support on most browsers.

Rate this Article

Adoption Stage
Style

Hello stranger!

You need to Register an InfoQ account or or login to post comments. But there's so much more behind being registered.

Get the most out of the InfoQ experience.

Tell us what you think

Allowed html: a,b,br,blockquote,i,li,pre,u,ul,p

Email me replies to any of my messages in this thread
Community comments

Allowed html: a,b,br,blockquote,i,li,pre,u,ul,p

Email me replies to any of my messages in this thread

Allowed html: a,b,br,blockquote,i,li,pre,u,ul,p

Email me replies to any of my messages in this thread

Discuss

Educational Content

Login to InfoQ to interact with what matters most to you.


Recover your password...

Follow

Follow your favorite topics and editors

Quick overview of most important highlights in the industry and on the site.

Like

More signal, less noise

Build your own feed by choosing topics you want to read about and editors you want to hear from.

Notifications

Stay up-to-date

Set up your notifications and don't miss out on content that matters to you

BT