Js/flash implements copying code to the Clipboard (compatible with all browsers) _javascript tips

Source: Internet
Author: User
Tags event listener unique id
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 ~

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.