Version 2: 2009-12-16. Another version with an alert message.
The original version of this article no longer works in most modern browsers which are attempting to prohibit access to the clipboard from a web page. This has to do with clipboard hijacking attacks. To get around this, developers began employing a flash solution, also discussed in the original article. That solution also fails with the release of Flash 10. jhuckaby has been coding the Zero Clipboard project for some time now, and has a workable solution; at least for the time being. The new requirement is that the user must click the flash movie to invoke an action from flash. This solution does that by hovering the flash copier movie over your click element; in this case a button. That also should satisfy the desired requirement of preventing hijacking attacks as the browser user must take an action to cause the copy.I am not sure what will happen with future browser versions or with the release of Flash 11. It is jhuckaby's method, with some additions of my own that I will use here.
You must realize this has nothing to do with protecting code. If you display code in a web browser, it can be copied by the user. Also, accessing the user's clip board has potential negative security issues.
For browsers which have no JavaScript or Flash support, the person using the browser can still click, drag and copy. Nothing done here will interfere with that. The purpose of this page in addition to providing a cross browser clipboard copy was to demonstrate alerting the user of any copyright restrictions we may have in a pop-over message.
What you need:
You can get the latest copies (version 1.5 as of this date) at the Zero Clipboard Google Code repository. There are a multitude of files in the download, but you will only need those two files. Don't try to download the file from my website and do not hard link to the file on my web site. Obtain the latest files at the link provided.
Since on my site the copied text is going to be code, you will also need a method to perform HTML Decoding in JavaScript, for which I recommend the htmlDecode.js From MSDN.
We will also need to call an initiation function after the page loads to initialize the ZeroClipboard object. I chose to put a small script block at the end of the page, which I know won't be called until after my DOM elements have loaded. As each of my pages have example code, and that is static, I simply preload the clipboard object with the HTML Decoded code on page load rather than implementing a mousedown event to grab the code.
DOWNSIDE: If there is not a "hand" cursor over the copy button, you may have to click twice. This could be confusing to your users. Why does this happen? There is a invisible Flash movie over the button. On page scroll, the Flash movie might shift position. It should not if there is a wrapping division with position relative, but sometimes it does. FWIW.
The code: essentials in red.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="author" content="Roderick Divilbiss">
<meta name="copyright" content="© 2005-2010 Roderick Divilbiss">
<meta name="MSSmartTagsPreventParsing" content="TRUE">
<title>Copy Example Code To The Clipboard With A Message</title>
<script type="text/javascript" src="htmlDecode.js"></script>
<script type="text/javascript" src="ZeroClipboard.js"></script>
<script type="text/javascript">
<!--
var scrollTop = 0; // will hold the top of the viewport after scrolling
var elLeft = 0; // will get the position of the click button.
var elTop = 0;
function findPos(obj) {
elLeft = 0;
elTop = 0;
while (obj) {
elLeft += obj.offsetLeft
elTop += obj.offsetTop
obj = obj.offsetParent
}
}
function openCopyMessage() {
var top;
document.getElementById('copyPopOver').style.display='block';
// position the pop over message above the copy button if possible, but
// keep the top of the pop over below the top of the viewport even if we
// end up covering the copy button. IE uses document.documentElement.scrollTop
// other browsers use window.pageYOffset.
scrollTop = (document.documentElement.scrollTop) ? document.documentElement.scrollTop : window.pageYOffset;
top = ((elTop-300)<scrollTop) ? scrollTop+20 : elTop-300;
document.getElementById('copyPopOver').style.top=(top)+'px';
// screen.availWidth is cross-browser, but what we need is the clientWidth.
// Also the pop over division is defined width 350px is CSS but measures 375px for some reason.
// document.documentElement.clientWidth returns correct cross-browser
document.getElementById('copyPopOver').style.left=((document.documentElement.clientWidth-375)/2)+'px';
}
function closeCopyMessage() {
document.getElementById('copyPopOver').style.display='none';
return false;
}
function my_complete( client ) {
findPos(document.getElementById('clip_button'));
openCopyMessage()
}
ZeroClipboard.setMoviePath( 'http://www.yourdomain.com/pathToFile/ZeroClipboard.swf' );
var clip = new ZeroClipboard.Client();
//-->
</script>
<style type="text/css">
<!--
#d_clip_button {
position:relative; // important! This is the <DIV> wrapping our button.
padding:10px;
text-align:center;
}
#copyPopOver {
position:absolute;
display:none;
top:-400px;
left:-400px;
width:350px;
color:#000000;
background-color:#FFE6BF;
border:3px solid #FF9900;
padding:10px;
}
#copyPopOver a {
color:#FF9900;
}
#copyPopOver a:hover {
color:#000000;
background-color:#FF9900;
}
#cpoBtnDiv {
text-align:center;
}
-->
</style>
</head>
<body>
<div class="code" id="theCode">
<pre id="clip_copy">
<p>your example code</p>
<p>your example code</p>
<p>your example code</p>
<p>your example code</p>
<p>your example code</p>
<p>your example code</p>
<p>your example code</p>
<p>your example code</p>
<p>your example code</p>
<p>your example code</p>
<p>your example code</p>
<p>your example code</p>
<p>your example code</p>
<p>your example code</p>
<p>your example code</p>
<p>your example code</p>
<p>your example code</p>
<p>your example code</p>
<p>your example code</p>
<p>your example code</p>
<p>your example code</p>
<p>your example code</p>
<p>your example code</p>
<p>your example code</p>
</pre>
</div>
<div id="d_clip_button"><input id="clip_button" type="button" value="Double Click To Copy To Clipboard"></div>
<script type="text/javascript">
clip.setText( htmlDecode(document.getElementById('clip_copy').innerHTML) );
clip.glue( 'clip_button', 'd_clip_button' );
clip.addEventListener( 'oncomplete', my_complete );
</script>
<div id="copyPopOver"><strong>The code was copied to your clip board.</strong><p>This code is © 2005-2010 Roderick Divilbiss.</p>
<p>Except where otherwise noted, this site, all content, and all source code and markup is licensed under a Creative Commons License <a rel="license" href="http://creativecommons.org/licenses/by-nc/2.0/">Creative Commons License</a>. Any code based or inspired by this code requires that code to also be available under the same license and requires attribution to this author and website.</p>
<p>Please read and honor the <a href="http://www.rodsdot.com/termsofuse.asp">Terms Of Use</a> to use this code.</p>
<div id="cpoBtnDiv"><input type="button" value="Close Message" onclick="closeCopyMessage();"></div>
</div>
</body>
</html>
Date Validation Using JavaScript .
Cross-Browser Clipboard Copy .
Loading Images With Remote Scripting .
Why JavaScript In Hyperlinks Is Bad .
Change The Submit Button To Show Waiting For AJAX Response .
European Date Validation Using JavaScript .
Database Results To Client Side Array .
Reading Files With JavaScript .
AJAX For Plain Text And HTML .
This code is © 2005-2010 Roderick Divilbiss.
Except where otherwise noted, this site, all content, and all source code and markup is licensed under a Creative Commons License Creative Commons License. Any code based or inspired by this code requires that code to also be available under the same license and requires attribution to this author and website.
Please read and honor the Terms Of Use to use this code.
