`
dreamoftch
  • 浏览: 498070 次
  • 性别: Icon_minigender_1
  • 来自: 上海
社区版块
存档分类
最新评论

ZeroClipboard实现多复制

js复制到剪切板zeroclipboard多复制 
阅读更多

 

参考：

Easy Multiple Copy to Clipboard by ZeroClipboard

 

要实现在多个复制按钮复制的功能(具体代码在附件中，路径修改一下就行了)：

 

 

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">
    
    <title>My JSP 'clip.jsp' starting page</title>
    
	<meta http-equiv="pragma" content="no-cache">
	<meta http-equiv="cache-control" content="no-cache">
	<meta http-equiv="expires" content="0">    
	<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
	<meta http-equiv="description" content="This is my page">
	<style type="text/css">
		.clip_button {
			background: #ddd;
			padding: 4px;
			width: 50px;
		}
	</style>
	<script src="<%=request.getContextPath()%>/page/jquery-1.4.2.min.js"></script>
	<script src="<%=request.getContextPath()%>/common/ZeroClipboard/ZeroClipboard.js"></script>
	<script>
		var clip = null;//ZeroClipboard.Client对象
		var current_id = null;//当前所在的文本元素id
		//指定ZeroClipboard.swf位置
		ZeroClipboard.setMoviePath("<%=basePath%>common/ZeroClipboard/ZeroClipboard.swf");  
		$(function(){
			clip = new ZeroClipboard.Client();//创建ZeroClipboard.Client对象
			clip.setHandCursor(true);//鼠标移动到元素上之后显示手型
			clip.glue('textid');
			//添加复制成功之后的操作
			clip.addEventListener('complete', function() {
				alert('复制成功,内容为：'+clip.clipText);
			});
			//添加mouseover事件，当鼠标移到该元素上面的时候，将flash div 也移到到该元素位置
			$("div.clip_button").each(function(){
				$(this).bind('mouseover',function(){
					var button_id = $(this).attr('id');//复制div的id
					var text_id = button_id+'_text';//要复制的元素id
					move_swf(text_id , button_id);
				});
			});
		});
		//移动浮动flash div到指定的地方，从而只需要使用一个flash即可在多个地方实现复制功能
		function move_swf(text_id,button_id) {
			//重新指定flash浮动div位置，用reposition
			clip.reposition(button_id);
			clip.setText($('#'+text_id).val());
		}
	</script>
  </head>
  
  <body>
		<table width="0" border="0">
			<tr>
				<td>
					<input type='text' id='textid_text' value='第一个输入框' />
				</td>
				<td>
					<div id='textid' class='clip_button'>
						复 制
					</div>
				</td>
			</tr>
			<tr>
				<td>
					<input type='text' id='textid2_text' value='第二个输入框' />
				</td>
				<td>
					<div id='textid2' class='clip_button'>
						复 制
					</div>
				</td>
			</tr>
			<tr>
				<td>
					<input type='text' id='textid3_text' value='第三个输入框' />
				</td>
				<td>
					<div id='textid3' class='clip_button'>
						复 制
					</div>
				</td>
			</tr>
			<tr>
				<td>
					<input type='text' id='textid4_text' value='第四个输入框' />
				</td>
				<td>
					<div id='textid4' class='clip_button'>
						复 制
					</div>
				</td>
			</tr>
			<tr>
				<td>
					<input type='text' id='textid5_text' value='第五个输入框' />
				</td>
				<td>
					<div id='textid5' class='clip_button'>
						复 制
					</div>
				</td>
			</tr>
		</table>
	</body>
</html>
 

 

 

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.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 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.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 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.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
	}
	
};
 

 

 

--------------------------------------------------------------------------------------------------------------------------------------------------------------------我是分割线------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

 

 

 

 

 

 

 

 

zeroclipboard官网：https://github.com/zeroclipboard/ZeroClipboard

 

下载压缩包，得到两个“ZeroClipboard.js”和“ZeroClipboard.swf”两个文件。

首先页面中载入ZeroClipboard.js

 

ZeroClipboard.setMoviePath( “ZeroClipboard.swf路径” );来指定ZeroClipboard.swf的地址。

 

demo:

 

 

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>ZeroClipboard demo实例</title>
	<script src="../js/ZeroClipboard.js"></script>
	<script src="../js/jquery.min.js"></script>
    <script>
		$(function(){
			var clip = new ZeroClipboard( document.getElementById("copy-button"), {
                          //指定ZeroClipboard.swf的路径
			  moviePath: "../js/ZeroClipboard.swf" 
			} );
			
			clip.on( 'load', function(client) {
			  // alert( "movie is loaded" );
			} );
			
			clip.on( 'complete', function(client, args) {
			  //this.style.display = 'none'; // "this" is the element that was clicked
			  alert("复制成功，复制的内容为: " + args.text );
			} );
			
			clip.on( 'mouseover', function(client) {
			  // alert("mouse over");
			} );
			
			clip.on( 'mouseout', function(client) {
			  // alert("mouse out");
			} );
			
			clip.on( 'mousedown', function(client) {
				//在这里为剪贴板赋值
				clip.setText($("#_input").val());
			} );
			
			clip.on( 'mouseup', function(client) {
			  // alert("mouse up");
			} );
		});
    </script>
</head>
<body>
 <button id="copy-button" title="复制到剪贴板">复制到剪贴板</button>
 <input type="text" id="_input">
</body>
</html>

 

不过在IE8下面好像有点问题，试了一下官网的例子，同样有问题，估计后面的版本会修复

 

分享到：
| 初步制作拖拽div以及弹出层 以及 切换标 ...
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    ZeroClipboard实现js复制

    当用户点击这个“假”的剪贴板按钮时，ZeroClipboard会将指定的文本放入剪贴板，从而实现复制功能。这种设计使得ZeroClipboard能够兼容大多数现代浏览器，包括谷歌Chrome。 要使用ZeroClipboard库，首先你需要在...

    使用 ZeroClipboard 实现复制功能

    标题中的“使用 ZeroClipboard 实现复制功能”是指利用 ZeroClipboard 这个JavaScript库来实现在网页上一键复制文本的功能。这个库广泛应用于Web应用中，为用户提供了一个方便的交互方式，模仿了桌面软件中常见的...

    ZeroClipboard js实现完美复制

    ZeroClipboard是一款JavaScript库，它允许用户通过“剪贴板”API在网页上实现文本的复制功能，从而提供一种跨浏览器的复制体验。这个库利用了Adobe Flash技术来绕过浏览器的安全限制，因为JavaScript通常不能直接...

    ZeroClipboard实现兼容多浏览器复制

    标题中的“ZeroClipboard实现兼容多浏览器复制”是指一个JavaScript库，ZeroClipboard，它允许用户在网页上通过模拟鼠标右键点击复制文本到剪贴板，从而实现跨浏览器的复制功能。这个库尤其重要，因为浏览器的安全...

    ZeroClipboard 复制与粘贴

    通常，`ZeroClipboard.js`负责与Flash对象进行通信，而`ZeroClipboard.swf`则是实现复制功能的Flash部分。 2. **实例化对象**：在JavaScript中创建ZeroClipboard实例，一般会在DOM加载完成后进行。例如： ```...

    ZeroClipboard.js 复制到剪切板（保准好用）

    因此，你可能需要提供一个备选方案，如使用浏览器原生的`navigator.clipboard.writeText()` API（需要用户权限），以便在Flash不可用时仍能实现复制功能。 6. **测试与优化**：最后，记得在不同的浏览器和设备上...

    ZeroClipboard实现各浏览器的复制功能

    标题中的“ZeroClipboard实现各浏览器的复制功能”指的是一个JavaScript库，它允许用户在各种浏览器上实现跨平台的文本复制功能。ZeroClipboard利用了Flash技术，因为在过去的浏览器环境中，Flash是实现跨浏览器交互...

    ZeroClipboard demo 网页复制功能

    **ZeroClipboard** 是一个流行的JavaScript库，主要用于在网页上实现跨浏览器的复制功能。这个库巧妙地利用了浏览器的安全限制，让网页应用可以模拟系统剪贴板的操作，从而让用户能够轻松地复制文本到剪贴板。它通过...

    ZeroClipboard 元素内容复制-兼容各浏览器

    ZeroClipboard 是一个JavaScript库，它允许网页应用模拟操作系统级别的剪贴板功能，即实现元素内容的复制。这个库尤其有用，因为它能跨浏览器工作，确保无论用户使用的是Chrome、Firefox、Safari还是其他浏览器，都...

    基于ZeroClipboard实现的网站内容复制粘贴JS特效源码.zip

    这个"基于ZeroClipboard实现的网站内容复制粘贴JS特效源码.zip"文件包含了实现这一功能的具体代码示例。下面我们将深入探讨ZeroClipboard的工作原理、如何使用以及它在前端开发中的应用场景。 首先，ZeroClipboard...

    ZeroClipboard-JS实现复制到剪贴板功能

    总的来说，ZeroClipboard是一个强大且易于使用的JavaScript库，它允许开发者轻松地实现复制到剪贴板的功能，尽管随着技术的发展，未来可能需要考虑更现代的替代方案。在使用ZeroClipboard的过程中，确保对Flash的...

    ZeroClipboard(JS复制内容到粘贴板）

    早期的Web开发中，开发者可以使用`document.execCommand('copy')`或`document.execCommand('paste')`来实现复制和粘贴功能，但这些方法在现代浏览器中的支持并不一致，尤其是在跨浏览器的场景下。 2. **...

    ZeroClipboard.js实现js复制功能

    这个库提供了一种简单、跨浏览器的API，使得开发者无需深入理解Flash技术，也能实现复制功能。 1. **安装与引入** 首先，你需要下载ZeroClipboard.js库，包括ZeroClipboard.js文件和相应的Flash.swf文件。在HTML...

    ZeroClipboard跨浏览器复制到剪切板

    另一个文件“ZeroClipboard.swf”则是Flash组件，它是ZeroClipboard实现跨浏览器剪切板功能的关键。 在实际使用ZeroClipboard时，开发者首先需要在HTML中创建一个用于触发复制事件的元素，例如一个按钮，并设置相应...

    JS实现点击复制功能（ZeroClipboard）

    ZeroClipboard是一个流行的JavaScript库，它利用浏览器的Flash插件来实现跨浏览器的剪贴板交互，允许用户通过简单的点击操作复制文本。以下我们将深入探讨如何使用ZeroClipboard库实现这一功能。 首先，我们需要...

    js实现ZeroClipboard组件复制内容到剪切板

    以上就是使用JavaScript通过ZeroClipboard实现复制到剪切板功能的基本流程。需要注意的是，随着Flash逐渐被淘汰，ZeroClipboard也正在向Web API的`navigator.clipboard`过渡，这是一个无需Flash就能访问剪贴板的新...

    zeroclipboard实现复到剪切板源代码

    - `clipboard.js`是另一个轻量级的库，无需Flash，通过`Clipboard API`实现复制功能，但同样受到浏览器兼容性的限制。 7. **安全与隐私**： - 使用zeroclipboard时，确保尊重用户的隐私，不要在未经用户许可的...

    ZeroClipboard

    ZeroClipboard是一款著名的JavaScript库，主要用于实现网页上的“复制到剪贴板”功能。这个功能在很多网站上都有应用，比如复制验证码、复制分享链接等。它巧妙地利用了浏览器的安全限制，通过Flash技术来实现跨域...

Magicbox
Global site tag (gtag.js) - Google Analytics