2023年7月9日发(作者:)
Js操作剪切板由于要在页⾯实现⼀个点击复制的功能,总结⼀下实现⽅法⽅法⼀:原⽣js实现 Var text = mentById("text") a("Text",text); 缺点:只⽀持IE.不⽀持ff,chrome,edge 优点:原⽣js,如果能实现兼容所有的浏览器的⽅法,那就是完美的⽅法⼆: 先说优缺点: 优点:兼容firefox,chrome,ie,edge 缺点:利⽤flash技术(flash估计马上要完了)1. jquery(zclip依赖jquery)2. 在页⾯引⼊js⽂件3. 将加⼊到项⽬中
操作事例:
(function (jQuery) {
= function (params) {
if (typeof params == "object" && !) {
var settings = ({}, ts, params);
return (function () {
var o = jQuery(this);
if ((':visible') && (typeof == 'string' || tion())) {
iePath();var clip = new ();
if (tion()) {('zClip_copy', );}
if (tion(Copy)) {('zClip_beforeCopy', Copy);} if (tion(opy)) {('zClip_afterCopy', opy);}
dCursor(dCursor);
Effects(Effects);
ntListener('mouseOver', function (client) {r('mouseenter');});
ntListener('mouseOut', function (client) {r('mouseleave');});
ntListener('mouseDown', function (client) {
r('mousedown');
if (tion(Copy)) {r('zClip_beforeCopy');}
if (!tion()) {t();} else {t(rHandler('zClip_copy'));}
});
ntListener('complete', function (client, text) { if (tion(opy)) {
r('zClip_afterCopy');
} else {if ( > 500) {text = (0, 500) + "...nn(" + ( - 500) + " characters not shown)";}
Class('hover');alert("Copied text to clipboard:nn " + text);}
if (fter) {r('click');}
});
(o[0], ()[0]);
jQuery(window).bind('load resize', function () {tion();});
}
});
} else if (typeof params == "string") {
return (function () {
var o = jQuery(this);
params = rCase();var zclipId = ('zclipId');var clipElm = jQuery('#' + zclipId + '.zclip');var clientId = ('id').replace(/^.*_/g, '') || null;
if (params == "remove") {
();Class('active hover');('zClip_copy');('zClip_beforeCopy');('zClip_afterCopy');ster(clientId);
} else if (params == "hide") {
();Class('active hover');
} else if (params == "show") {
();
}
});
}
};
})(jQuery);
// ZeroClipboard// Simple Set Clipboard System// Author: Joseph Huckabyvar ZeroClipboard = {
version: "1.0.7",clients: {},// registered upload clients on page, indexed by idmoviePath: '',// URL to movienextId: 1,// ID of next movie
defaults: {path: '',clickAfter: true,setHandCursor: true,setCSSEffects: true,
copy: null,// a string or function that returns string
beforeCopy: null,afterCopy: null},
jQuery: function (thingy) {// simple DOM lookup utility functionif (typeof(thingy) == 'string') thingy = mentById(thingy);if (!ss) {// extend element with a few useful = function () {y = 'none';}; = function () {y = '';};ss = function (name) {Class(name);ame += ' ' + name;};Class = function (name) {var classes = (/s+/);var idx = -1;for (var k = 0; k < ; k++) {if (classes[k] == name) {idx = k;k = ;}}if (idx > -1) {(idx, 1);ame = (' ');}return this;};ss = function (name) {return !!(new RegExp("s*" + name + "s*"));};}return thingy;},
setMoviePath: function (path) {// set path to ath = path;},
dispatch: function (id, eventName, args) {// receive event from flash movie, send to clientvar client = s[id];if (client) {eEvent(eventName, args);}},
register: function (id, client) {// register new client to receive s[id] = client;},
unregister: function (id) {if (typeof(id) === 'number' && Property(id)) {delete s[id];}},
getDOMObjectPosition: function (obj, stopObj) {// get absolute coordinates for dom elementvar info = {left: 0,top: 0,width: ? : Width,height: ? : Height};
if (obj && (obj != stopObj)) { += Left; += Top;}
return info;}, Client: function (elem) {// constructor for new simple upload rs = {};
// unique = ++;d = 'ZeroClipboardMovie_' + ;
// register client with singleton to receive flash er(, this);
// create movieif (elem) (elem);}};
ype = {
id: 0,// unique ID for usready: false,// whether movie is ready to receive events or notmovie: null,// reference to movie objectclipText: '',// text to copy to clipboardhandCursorEnabled: true,// whether to show hand cursor, or default pointer cursorcssEffects: true,// enable CSS mouse effects on dom containerhandlers: null,// user event handlersglue: function (elem, appendElem, stylesToAdd) {// glue to DOM element// elem can be ID or actual DOM element ment = (elem);
// float just above object, or zIndex 99 if dom element isn't setvar zIndex = 99;if () {zIndex = parseInt(, 10) + 1;}
if (typeof(appendElem) == 'string') {appendElem = (appendElem);} else if (typeof(appendElem) == 'undefined') {appendElem = mentsByTagName('body')[0];}
// find X/Y position of domElementvar box = ObjectPosition(ment, appendElem);
// create floating DIV above = Element('div');ame = "zclip"; = "zclip-" + d;jQuery(ment).data('zclipId', 'zclip-' + d);var style = ;on = 'absolute'; = '' + + 'px'; = '' + + 'px'; = '' + + 'px'; = '' + + 'px'; = zIndex;
if (typeof(stylesToAdd) == 'object') {for (var addedStyle in stylesToAdd) {style[addedStyle] = stylesToAdd[addedStyle];}}
// oundColor = '#f00'; // Child();
TML = L(, );},
getHTML: function (width, height) {// return HTML for movievar html = '';var flashvars = 'id=' + + '&width=' + width + '&height=' + height;
if ((/MSIE/)) {// IE gets an OBJECT tagvar protocol = (/^https/i) ? '' : '';html += '';} else {// all other browsers get an EMBED taghtml += '';}return html;},
hide: function () {// temporarily hide floater offscreenif () { = '-2000px';}},
show: function () {// show ourselves after a call to hide()tion();},
destroy: function () {// destroy control and floaterif (ment && ) {();TML = '';
var body = mentsByTagName('body')[0];try {Child();} catch (e) {//do nothing}
ment = null; = null;}},
reposition: function (elem) {// reposition our floating div, optionally to new container// warning: container CANNOT change size, only positionif (elem) {ment = (elem);if (!ment) ();} if (ment && ) {var box = ObjectPosition(ment);var style = ; = '' + + 'px'; = '' + + 'px';}},
setText: function (newText) {// set text to be copied to xt = newText;if () {t(newText);}},
addEventListener: function (eventName, func) {// add user event listener for event// event types: load, queueStart, fileStart, fileComplete, queueComplete, progress, error, canceleventName = ng().toLowerCase().replace(/^on/, '');if (!rs[eventName]) {rs[eventName] = [];}rs[eventName].push(func);},
setHandCursor: function (enabled) {// enable hand cursor (true), or default arrow cursor (false)rsorEnabled = enabled;if () {dCursor(enabled);}}, setCSSEffects: function (enabled) {// enable or disable CSS effects on DOM ects = !! enabled;},
receiveEvent: function (eventName, args) {// receive event from flasheventName = ng().toLowerCase().replace(/^on/, '');
// special behavior for certain eventsswitch (eventName) {case 'load':// movie claims it is ready, but in IE this isn't always // bug fix: Cannot extend EMBED DOM elements in Firefox, must use traditional = mentById(d);var self = this;
if (!) {setTimeout(function () {eEvent('load', null);}, 1);return;}
// firefox on pc needs a "kick" in order to set these in certain casesif (! && (/Firefox/) && (/Windows/)) {setTimeout(function () {eEvent('load', null);}, 100); = true;return;} = true;try {t(xt);} catch (e) {}try {dCursor(rsorEnabled);} catch (e) {}break;
case 'mouseover':if (ment && ects) {ss('hover');if (rActive) {ss('active');}
}break;
case 'mouseout':if (ment && ects) {rActive = false;if (ss('active')) {Class('active');rActive = true;}Class('hover');
}break;
case 'mousedown':if (ment && ects) {ss('active');}break;
case 'mouseup':if (ment && ects) {Class('active');rActive = false;}break;} // switch eventNameif (rs[eventName]) {for (var idx = 0, len = rs[eventName].length; idx < len; idx++) {var func = rs[eventName][idx];
if (tion(func)) {// actual function referencefunc(this, args);} else if ((typeof(func) == 'object') && ( == 2)) {// PHP style object + method, i.e. [myObject, 'myMethod']func[0][func[1]](this, args);} else if (typeof(func) == 'string') {// name of functionwindow[func](this, args);}} // foreach event handler defined} // user defined handler for event}
};
发布者:admin,转转请注明出处:http://www.yc00.com/news/1688853698a176693.html
评论列表(0条)