Servage Magazine

Information about YOUR hosting company – where we give you a clear picture of what we think and do!

Copy-to-clipboard with Javascript

Wednesday, August 22nd, 2018 by Servage

It’s amazing what you can accomplish with Javascript. Frameworks like jQuery make it quite easy to get going with your own functionality. We have some articles about it here on the Magazine: Create a jQuery plugin and Element-specific data handling for jQuery plugins, and a presentation of Starter. You can pretty much do whatever you like, and quite fast as well, using jQuery, or similar Javascript technologies. The web also provides you with a whole lot of free/open-source scripts you can use, to add rich functionality to your web apps. Today I am going to show you how easy you can add a copy-to-clipboard function.

“The Zero Clipboard library provides an easy way to copy text to the clipboard using an invisible Adobe Flash movie, and a JavaScript interface. The “Zero” signifies that the library is invisible and the user interface is left entirely up to you.” – Zero Clipboard Project Page

This script is really lightweight, and does exactly what it promises. It can be used extremely easily, but still offers a ton of customization options. Look at this example to see how easy you can integrate this:

<script type="text/javascript" src="ZeroClipboard.js"></script>
<div id="clipButton">Copy To Clipboard</div>
<script language="JavaScript">
  var clip = new ZeroClipboard.Client();
  clip.setText('My text to be copied...');
  clip.glue('clipButton');
</script>

You can also use some of the many callback functions, to add further functionality. For example dynamic setting of the content to be copied (it could be the content of a textarea, or any other element you wish).

clip.addEventListener(‘onMouseUp’, function() {
// Copy my dynamic content to clipboard
});

clip.addEventListener(‘onMouseUp’, function() { // Copy my dynamic content to clipboard});

So if your project could use a copy function, this is a very neat plugin to get it done fast.

Copy-to-clipboard with Javascript, 4.1 out of 5 based on 12 ratings
Categories: Software & Webapps

Keywords:

You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

No comments yet (leave a comment)

You are welcome to initiate a conversation about this blog entry.

Leave a comment

You must be logged in to post a comment.