Currently, if javascript is used to write the code copied to the clipboard, it is generally not compatible with browsers. So we can use flash to simulate a layer and then copy it to make it suitable for all browsers ~
Download a swf file and a js file. Put the two files together with htm.
Figure:
It must be used on the server.
Figure:
JS Code:
Copy codeThe Code is 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 99 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 bytes "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 an 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 after 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 be 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.css Effects = !! 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 these 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.css Effects ){
This. domElement. addClass ('hover ');
If (this. recoverActive) this. domElement. addClass ('active ');
}
Break;
Case 'mouseout ':
If (this. domElement & this.css Effects ){
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.css Effects ){
This. domElement. addClass ('active ');
}
Break;
Case 'mouseup ':
If (this. domElement & this.css Effects ){
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 codeThe Code is as follows:
A.htm
<Html>
<Head>
<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>
</Head>
<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 copied </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>
</Html>
Download flash files online by yourself ~
