Currently, if you use JavaScript to write code that is copied to the Clipboard, it is generally not compatible with browsers. So the way to use flash, simulation of a layer, and then to copy, you can do all the browser application Oh ~
Need to download a SWF file, and a JS file. Put the two files, and the HTM together.
Icon:
Must be placed on the server side to use OH.
Icon:
JS Code:
Copy Code code as follows:
Zeroclipboard.js
Simple Set Clipboard System
Author:joseph Huckaby
var Zeroclipboard = {
Version: "1.0.7",
Clients: {},//Registered upload clients on page, indexed by ID
Moviepath: ' zeroclipboard.swf ',//URL to Movie
Nextid:1,//ID of next movie
$: function (thingy) {
Simple DOM Lookup Utility function
if (typeof (thingy) = = ' string ') thingy = document.getElementById (thingy);
if (!thingy.addclass) {
Extend element with a few useful methods
Thingy.hide = function () {This.style.display = ' none ';};
Thingy.show = function () {this.style.display = ';};
Thingy.addclass = function (name) {this.removeclass (name); This.classname + = ' + name;};
Thingy.removeclass = function (name) {
var classes = This.className.split (/\s+/);
var idx =-1;
for (var k = 0; k < classes.length; k++) {
if (classes[k] = = name) {idx = k; k = classes.length;}
}
if (idx >-1) {
Classes.splice (idx, 1);
This.classname = Classes.join (");
}
return this;
};
Thingy.hasclass = function (name) {
Return!! This.className.match (New RegExp ("\\s*" + name + "\\s*"));
};
}
return thingy;
},
Setmoviepath:function (path) {
Set Path to zeroclipboard.swf
This.moviepath = path;
},
Dispatch:function (ID, eventName, args) {
Receive event from Flash movie, send to Client
var client = This.clients[id];
if (client) {
Client.receiveevent (EventName, args);
}
},
Register:function (ID, client) {
Register new client to receive events
This.clients[id] = client;
},
Getdomobjectposition:function (obj, stopobj) {
Get absolute coordinates for DOM element
var info = {
left:0,
top:0,
Width:obj.width? Obj.width:obj.offsetWidth,
Height:obj.height? Obj.height:obj.offsetHeight
};
while (obj && (obj!= stopobj)) {
Info.left + = Obj.offsetleft;
Info.top + = Obj.offsettop;
obj = obj.offsetparent;
}
return info;
},
Client:function (elem) {
Constructor for new simple upload client
This.handlers = {};
Unique ID
This.id = zeroclipboard.nextid++;
This.movieid = ' zeroclipboardmovie_ ' + this.id;
Register client with Singleton to receive flash events
Zeroclipboard.register (this.id, this);
Create movie
if (elem) This.glue (elem);
}
};
ZeroClipboard.Client.prototype = {
id:0,//unique ID for us
Ready:false,//Whether movie is ready to receive events or not
Movie:null,//reference to movie object
ClipText: ',//text to copy to clipboard
Handcursorenabled:true,//Whether to show hand cursor, or default pointer cursor
Csseffects:true,//enable CSS mouse effects on DOM container
Handlers:null,//user event handlers
Glue:function (Elem, Appendelem, Stylestoadd) {
Glue to DOM Element
Elem can be ID or actual DOM element object
This.domelement = zeroclipboard.$ (elem);
Float just above object, or ZIndex if DOM element isn ' t set
var zindex = 99;
if (This.domElement.style.zIndex) {
ZIndex = parseint (This.domElement.style.zIndex, 10) + 1;
}
if (typeof (Appendelem) = = ' String ') {
Appendelem = zeroclipboard.$ (Appendelem);
}
else if (typeof (Appendelem) = = ' undefined ') {
Appendelem = document.getElementsByTagName (' body ') [0];
}
Find x/y position of DomElement
var box = zeroclipboard.getdomobjectposition (this.domelement, Appendelem);
Create floating DIV above element
This.div = document.createelement (' div ');
var style = This.div.style;
style.position = ' absolute ';
Style.left = ' + box.left + ' px ';
Style.top = ' + box.top + ' px ';
Style.width = ' + box.width + ' px ';
Style.height = ' + box.height + ' px ';
Style.zindex = ZIndex;
if (typeof (stylestoadd) = = ' object ') {
For (Addedstyle in Stylestoadd) {
Style[addedstyle] = Stylestoadd[addedstyle];
}
}
Style.backgroundcolor = ' #f00 '; Debug
Appendelem.appendchild (THIS.DIV);
This.div.innerHTML = this.gethtml (Box.width, box.height);
},
Gethtml:function (width, height) {
return HTML for Movie
var html = ';
var flashvars = ' id= ' + this.id +
' &width= ' + width +
' &height= ' + height;
if (Navigator.userAgent.match (/msie/)) {
IE gets an OBJECT tag
var protocol = Location.href.match (/^https/i)? ' https://': ' http://';
html = ' <object classid= ' clsid:d27cdb6e-ae6d-11cf-96b8-444553540000 ' codebase= ' +protocol+ ' download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,0,0 "width=" ' +width+ ' "height=" ' +height + ' "id=" ' +this.movieid+ ' "align=" Middle "><param name=" allowscriptaccess "value=" Always "/><param name=" allowFullScreen "value=" false "/><param name=" movie "value=" ' +zeroclipboard.moviepath+ ' "/><param name=" Loop "value=" false "/><param name=" menu "value=" false "/><param name=" quality "value=" best "/><param Name= "bgcolor" value= "#ffffff"/><param name= "flashvars" value= "' +flashvars+ '"/><param name= "wmode" value= "Transparent"/></object> ";
}
else {
All other browsers get a EMBED tag
html + + ' <embed id= ' +this.movieid+ ' src= ' +zeroclipboard.moviepath+ ' loop= ' false ' menu= ' false ' quality= ' best ' Bgcolor= "#ffffff" width= "' +width+ '" height= "' +height+ '" name= "' +this.movieid+ '" align= "Middle" allowscriptaccess= " Always "allowfullscreen=" false "Type=" Application/x-shockwave-flash "pluginspage=" http://www.macromedia.com/go/ Getflashplayer "flashvars=" ' +flashvars+ ' "wmode=" Transparent "/>";
}
return HTML;
},
Hide:function () {
Temporarily Hide Floater offscreen
if (this.div) {
This.div.style.left = ' -2000px ';
}
},
Show:function () {
Show ourselves under a call to hide ()
This.reposition ();
},
Destroy:function () {
Destroy control and Floater
if (this.domelement && this.div) {
This.hide ();
This.div.innerHTML = ';
var BODY = document.getelementsbytagname (' body ') [0];
try {body.removechild (this.div);} catch (E) {;}
This.domelement = null;
This.div = null;
}
},
Reposition:function (elem) {
Reposition our floating div, optionally to new container
Warning:container cannot change size, only position
if (elem) {
This.domelement = zeroclipboard.$ (elem);
if (!this.domelement) this.hide ();
}
if (this.domelement && this.div) {
var box = zeroclipboard.getdomobjectposition (this.domelement);
var style = This.div.style;
Style.left = ' + box.left + ' px ';
Style.top = ' + box.top + ' px ';
}
},
Settext:function (NewText) {
Set text to is copied to clipboard
This.cliptext = NewText;
if (This.ready) This.movie.setText (NewText);
},
Addeventlistener:function (EventName, func) {
Add user event Listener for event
Event Types:load, Queuestart, Filestart, Filecomplete, Queuecomplete, progress, error, cancel
EventName = Eventname.tostring (). toLowerCase (). Replace (/^on/, ");
if (!this.handlers[eventname]) this.handlers[eventname] = [];
This.handlers[eventname].push (func);
},
Sethandcursor:function (enabled) {
Enable hand cursor (TRUE), or default arrow cursor (FALSE)
this.handcursorenabled = enabled;
if (this.ready) this.movie.setHandCursor (enabled);
},
Setcsseffects:function (enabled) {
Enable or disable CSS effects on DOM container
This.csseffects =!! Enabled
},
Receiveevent:function (EventName, args) {
Receive event from Flash
EventName = Eventname.tostring (). toLowerCase (). Replace (/^on/, ");
Special behavior for certain events
Switch (eventName) {
Case ' Load ':
Movie claims it is ready, but in IE this isn ' t always the case ...
Bug Fix:cannot extend EMBED DOM elements in Firefox, must use traditional function
This.movie = document.getElementById (This.movieid);
if (!this.movie) {
var self = this;
settimeout (function () {self.receiveevent (' load ', null);}, 1);
Return
}
Firefox on PC needs a ' kick ' in order to set this in certain cases
if (!this.ready && navigator.userAgent.match (/firefox/) && Navigator.userAgent.match (/windows/)) {
var self = this;
settimeout (function () {self.receiveevent (' load ', null);}, 100);
This.ready = true;
Return
}
This.ready = true;
This.movie.setText (This.cliptext);
This.movie.setHandCursor (this.handcursorenabled);
Break
Case ' mouseover ':
if (this.domelement && this.csseffects) {
This.domElement.addClass (' hover ');
if (this.recoveractive) this.domElement.addClass (' active ');
}
Break
Case ' mouseout ':
if (this.domelement && this.csseffects) {
This.recoveractive = false;
if (This.domElement.hasClass (' active ')) {
This.domElement.removeClass (' active ');
This.recoveractive = true;
}
This.domElement.removeClass (' hover ');
}
Break
Case ' MouseDown ':
if (this.domelement && this.csseffects) {
This.domElement.addClass (' active ');
}
Break
Case ' MouseUp ':
if (this.domelement && this.csseffects) {
This.domElement.removeClass (' active ');
This.recoveractive = false;
}
Break
}//Switch eventName
if (This.handlers[eventname]) {
for (var idx = 0, len = this.handlers[eventname].length; idx < len; idx++) {
var func = This.handlers[eventname][idx];
if (typeof (func) = = ' function ') {
Actual function Reference
Func (this, args);
}
else if ((typeof (func) = = ' object ') && (func.length = 2)) {
PHP Style object + method, i.e. [MyObject, ' MyMethod ']
func[0][Func[1]] (this, args);
}
else if (typeof (func) = = ' String ') {
Name of function
Window[func] (this, args);
}
}//foreach event handler defined
}//User defined handler for event
}
};
HTML code:
Copy Code code as follows:
A.htm
<title>zero Clipboard test</title>
<style type= "Text/css" >
body {font-family:arial,sans-serif; font-size:9pt;}
. my_clip_button {width:150px; Text-align:center border:1px solid black; Background-color: #ccc; margin:10px; padding : 10px; Cursor:default; font-size:9pt; }
. my_clip_button.hover {background-color: #eee;}
. my_clip_button.active {background-color: #aaa;}
</style>
<body>
<div id= "D_clip_container" style= "position:relative" >
<div id= "D_clip_button" class= "My_clip_button" ><b>copy to Clipboard...</b></div>
</div>
<textarea id= "MyResource" class= "Clearfix" onchange= "Clip.settext (this.value)" > I copy </textarea>
<script type= "Text/javascript" src= "Zeroclipboard.js" ></script>
<script language= "JavaScript" >
var clip = null;
function $ (ID) {return document.getElementById (ID);}
function init () {
Clip = new Zeroclipboard.client ();
Clip.sethandcursor (TRUE);
Clip.addeventlistener (' Load ', function (client) {
Debugstr ("Flash movie Loaded and ready.");
});
Clip.addeventlistener (' MouseOver ', function (client) {
Update the text on mouse over
Clip.settext ($ (' MyResource '). Value);
});
Clip.addeventlistener (' Complete ', function (client, text) {
Debugstr ("Copied Text to Clipboard:" + text);
});
Clip.glue (' D_clip_button ', ' D_clip_container ');
}
settimeout (function () {
Init ();
},1500);
</script>
</body>
Flash file please download on the Internet ha ~