Also, 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. As of IE 7 a warning message will be displayed. Future versions of Flash may disable the ability to copy to the user's clip board object, rendering this method useless.
For browsers which have no JavaScript support enabled, the person using the browser can still click, drag and copy. Nothing done here will interfere with that. Only in JavaScript is enabled then the person using the browser will not be able to click, drag and copy the code because they will get a pop over message advising them that the data was copied to their clip board. This also lets us remind them of any copyright restrictions we may have.
There are two flash objects which must exist on your web server.
We will also use three JavaScript library files to assist us.
On our page we require then is a division to hold the _clipboard.swf object, which will be hidden if the browser is IE and which will contain a message of your choice if the browser in non-IE and does not support Flash.
We will also need to call an initiation function when the page loads, to determine if the browser supports window.clipboardData (IE) or if Flash is supported. We then need a function to act on the click event, get the mouse coordinates to display our message and to call whichever method the browser supports in order to copy the data to the clipboard.
Click any where in the example code division below to see this in action. For IE the window.clipBoardData() method is used, for other browsers a flash object is used.
<!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, 2006 Roderick Divilbiss">
<meta name="MSSmartTagsPreventParsing" content="TRUE">
<title>Copy Example Code To The Clipboard With A Message</title>
<script type="text/javascript" src="events.js"></script>
<script type="text/javascript" src="htmlDecode.js"></script>
<script type="text/javascript" src="swfobject.js"></script>
<script type="text/javascript">
<!--
var mousex;
var mousey;
function doClick(e) {
if (e) {
if (e.pageX || e.pageY) {
mousex = e.pageX;
mousey = e.pageY;
}else if (e.clientX || e.clientY) {
mousex = e.clientX + document.body.scrollLeft;
mousey = e.clientY + document.body.scrollTop;
}
}
var theCode = document.getElementById(this.id+'Pre').innerHTML;
theCode = htmlDecode(theCode);
copy(theCode);
openCopyMessage();
}
function copy(text2copy) {
/* This function was modified 2007 by Roderick Divilbiss
and was based upon two scripts:
The first script was from
The JavaScript Source!! http://javascript.internet.com
Created by: Mark O'Sullivan :: http://lussumo.com/
Jeff Larson :: http://www.jeffothy.com/
Mark Percival :: http://webchicanery.com/
The second script was taken from http://blog.deconcept.com/swfobject/
*/
if (window.clipboardData) {
window.clipboardData.setData("Text",text2copy);
}else{
var so = new SWFObject('_clipboard.swf', 'copy_contents', '0', '0', '4');
so.addVariable('clipboard', escape(text2copy));
so.write('flashcontent');
}
}
function openCopyMessage() {
document.getElementById('copyPopOver').style.display='block';
// position the pop over message at the point of the mouse click
document.getElementById('copyPopOver').style.top=mousey+'px';
document.getElementById('copyPopOver').style.left=mousex+'px';
}
function closeCopyMessage() {
document.getElementById('copyPopOver').style.display='none';
// return false to cancel the href="#"
return false;
}
//-->
</script>
<style type="text/css">
<!--
/* set the style of the message...we must have position absolute
you may need to add z-index depending on your page's style */
#copyPopOver {
position:absolute;
display:none;
width:350px;
color:#000000;
border:2px solid #FF9900;
padding:5px;
background-color:#FFE6BF;
top:-400px;
left:-400px;
}
#copyPopOver a {
color:#FF9900;
}
#copyPopOver a:hover {
color:#000000;
background-color:#FF9900;
}
-->
</style>
</head>
<body>
<div class="code" id="theCode">
<pre id="theCodePre">your example code</pre>
</div>
<div id="copyPopOver">This code is © 2005-2007 Roderick Divilbiss.<p><strong>The code was copied to your clip board.</strong></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.</p>
<p>Please read and honor the <a href="http://www.rodsdot.com/termsofuse.asp">Terms Of Use</a> to use this code.</p>
<p>[<a href="#" onclick="closeCopyMessage();">close message</a>]
</div>
<script type="text/javascript">init()</script>
</body>
</html>
Client Side Includes Using JavaScript
Creating A JavaScript Slider Input in JavaScript
Creating Conditional Links With ASP
Dynamically Adding Rows and Fields To A Table Based Form
Geo-Coding IP Addresses
How To Make A Pop Over Menu
JavaScript Date Validation DD/MM/YYYY
JavaScript Date Validation MM/DD/YYYY
Parameterized SQL Using Multiple Form Inputs and Filtering
Play A WAV File On Mouseover
Pop Over Form
Resorting A Multi-Dimensional Table Using Client-Side JavaScript
Scripting Remote Images in JavaScript
Using AJAX to Return HTML For Dynamic Forms
Using Images For CAPTCHA
Using Parameterized SQL with ASP and MS Access
Why JavaScript As The HREF Of A Link Is Bad
The code was copied to your clip board.
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.
Please read and honor the Terms Of Use to use this code.
