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

  1. <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
  2. <%
  3. String path = request.getContextPath();
  4. String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
  5. %>
  6. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
  7. <html>
  8. <head>
  9. <base href="<%=basePath%>">
  10. <title>My JSP 'clip.jsp' starting page</title>
  11. <meta http-equiv="pragma" content="no-cache">
  12. <meta http-equiv="cache-control" content="no-cache">
  13. <meta http-equiv="expires" content="0">
  14. <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
  15. <meta http-equiv="description" content="This is my page">
  16. <style type="text/css">
  17. .clip_button {
  18. background: #ddd;
  19. padding: 4px;
  20. width: 50px;
  21. }
  22. </style>
  23. <script src="<%=request.getContextPath()%>/page/jquery-1.4.2.min.js"></script>
  24. <script src="<%=request.getContextPath()%>/common/ZeroClipboard/ZeroClipboard.js"></script>
  25. <script>
  26. var clip = null;//ZeroClipboard.Client对象
  27. var current_id = null;//当前所在的文本元素id
  28. //指定ZeroClipboard.swf位置
  29. ZeroClipboard.setMoviePath("<%=basePath%>common/ZeroClipboard/ZeroClipboard.swf");
  30. $(function(){
  31. clip = new ZeroClipboard.Client();//创建ZeroClipboard.Client对象
  32. clip.setHandCursor(true);//鼠标移动到元素上之后显示手型
  33. clip.glue('textid');
  34. //添加复制成功之后的操作
  35. clip.addEventListener('complete', function() {
  36. alert('复制成功,内容为：'+clip.clipText);
  37. });
  38. //添加mouseover事件，当鼠标移到该元素上面的时候，将flash div 也移到到该元素位置
  39. $("div.clip_button").each(function(){
  40. $(this).bind('mouseover',function(){
  41. var button_id = $(this).attr('id');//复制div的id
  42. var text_id = button_id+'_text';//要复制的元素id
  43. move_swf(text_id , button_id);
  44. });
  45. });
  46. });
  47. //移动浮动flash div到指定的地方，从而只需要使用一个flash即可在多个地方实现复制功能
  48. function move_swf(text_id,button_id) {
  49. //重新指定flash浮动div位置，用reposition
  50. clip.reposition(button_id);
  51. clip.setText($('#'+text_id).val());
  52. }
  53. </script>
  54. </head>
  55. <body>
  56. <table width="0" border="0">
  57. <tr>
  58. <td>
  59. <input type='text' id='textid_text' value='第一个输入框' />
  60. </td>
  61. <td>
  62. <div id='textid' class='clip_button'>
  63. 复 制
  64. </div>
  65. </td>
  66. </tr>
  67. <tr>
  68. <td>
  69. <input type='text' id='textid2_text' value='第二个输入框' />
  70. </td>
  71. <td>
  72. <div id='textid2' class='clip_button'>
  73. 复 制
  74. </div>
  75. </td>
  76. </tr>
  77. <tr>
  78. <td>
  79. <input type='text' id='textid3_text' value='第三个输入框' />
  80. </td>
  81. <td>
  82. <div id='textid3' class='clip_button'>
  83. 复 制
  84. </div>
  85. </td>
  86. </tr>
  87. <tr>
  88. <td>
  89. <input type='text' id='textid4_text' value='第四个输入框' />
  90. </td>
  91. <td>
  92. <div id='textid4' class='clip_button'>
  93. 复 制
  94. </div>
  95. </td>
  96. </tr>
  97. <tr>
  98. <td>
  99. <input type='text' id='textid5_text' value='第五个输入框' />
  100. </td>
  101. <td>
  102. <div id='textid5' class='clip_button'>
  103. 复 制
  104. </div>
  105. </td>
  106. </tr>
  107. </table>
  108. </body>
  109. </html>
<%@ 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源码:

  1. // Simple Set Clipboard System
  2. // Author: Joseph Huckaby
  3. var ZeroClipboard = {
  4. version: "1.0.7",
  5. clients: {}, // registered upload clients on page, indexed by id
  6. moviePath: 'ZeroClipboard.swf', // URL to movie
  7. nextId: 1, // ID of next movie
  8. $: function(thingy) {
  9. // simple DOM lookup utility function
  10. if (typeof(thingy) == 'string') thingy = document.getElementById(thingy);
  11. if (!thingy.addClass) {
  12. // extend element with a few useful methods
  13. thingy.hide = function() { this.style.display = 'none'; };
  14. thingy.show = function() { this.style.display = ''; };
  15. thingy.addClass = function(name) { this.removeClass(name); this.className += ' ' + name; };
  16. thingy.removeClass = function(name) {
  17. var classes = this.className.split(/\s+/);
  18. var idx = -1;
  19. for (var k = 0; k < classes.length; k++) {
  20. if (classes[k] == name) { idx = k; k = classes.length; }
  21. }
  22. if (idx > -1) {
  23. classes.splice( idx, 1 );
  24. this.className = classes.join(' ');
  25. }
  26. return this;
  27. };
  28. thingy.hasClass = function(name) {
  29. return !!this.className.match( new RegExp("\\s*" + name + "\\s*") );
  30. };
  31. }
  32. return thingy;
  33. },
  34. setMoviePath: function(path) {
  35. // set path to ZeroClipboard.swf
  36. this.moviePath = path;
  37. },
  38. dispatch: function(id, eventName, args) {
  39. // receive event from flash movie, send to client
  40. var client = this.clients[id];
  41. if (client) {
  42. client.receiveEvent(eventName, args);
  43. }
  44. },
  45. register: function(id, client) {
  46. // register new client to receive events
  47. this.clients[id] = client;
  48. },
  49. getDOMObjectPosition: function(obj, stopObj) {
  50. // get absolute coordinates for dom element
  51. var info = {
  52. left: 0,
  53. top: 0,
  54. width: obj.width ? obj.width : obj.offsetWidth,
  55. height: obj.height ? obj.height : obj.offsetHeight
  56. };
  57. while (obj && (obj != stopObj)) {
  58. info.left += obj.offsetLeft;
  59. info.top += obj.offsetTop;
  60. obj = obj.offsetParent;
  61. }
  62. return info;
  63. },
  64. Client: function(elem) {
  65. // constructor for new simple upload client
  66. this.handlers = {};
  67. // unique ID
  68. this.id = ZeroClipboard.nextId++;
  69. this.movieId = 'ZeroClipboardMovie_' + this.id;
  70. // register client with singleton to receive flash events
  71. ZeroClipboard.register(this.id, this);
  72. // create movie
  73. if (elem) this.glue(elem);
  74. }
  75. };
  76. ZeroClipboard.Client.prototype = {
  77. id: 0, // unique ID for us
  78. ready: false, // whether movie is ready to receive events or not
  79. movie: null, // reference to movie object
  80. clipText: '', // text to copy to clipboard
  81. handCursorEnabled: true, // whether to show hand cursor, or default pointer cursor
  82. cssEffects: true, // enable CSS mouse effects on dom container
  83. handlers: null, // user event handlers
  84. glue: function(elem, appendElem, stylesToAdd) {
  85. // glue to DOM element
  86. // elem can be ID or actual DOM element object
  87. this.domElement = ZeroClipboard.$(elem);
  88. // float just above object, or zIndex 99 if dom element isn't set
  89. var zIndex = 99;
  90. if (this.domElement.style.zIndex) {
  91. zIndex = parseInt(this.domElement.style.zIndex, 10) + 1;
  92. }
  93. if (typeof(appendElem) == 'string') {
  94. appendElem = ZeroClipboard.$(appendElem);
  95. }
  96. else if (typeof(appendElem) == 'undefined') {
  97. appendElem = document.getElementsByTagName('body')[0];
  98. }
  99. // find X/Y position of domElement
  100. var box = ZeroClipboard.getDOMObjectPosition(this.domElement, appendElem);
  101. // create floating DIV above element
  102. this.div = document.createElement('div');
  103. var style = this.div.style;
  104. style.position = 'absolute';
  105. style.left = '' + box.left + 'px';
  106. style.top = '' + box.top + 'px';
  107. style.width = '' + box.width + 'px';
  108. style.height = '' + box.height + 'px';
  109. style.zIndex = zIndex;
  110. if (typeof(stylesToAdd) == 'object') {
  111. for (addedStyle in stylesToAdd) {
  112. style[addedStyle] = stylesToAdd[addedStyle];
  113. }
  114. }
  115. // style.backgroundColor = '#f00'; // debug
  116. appendElem.appendChild(this.div);
  117. this.div.innerHTML = this.getHTML( box.width, box.height );
  118. },
  119. getHTML: function(width, height) {
  120. // return HTML for movie
  121. var html = '';
  122. var flashvars = 'id=' + this.id +
  123. '&width=' + width +
  124. '&height=' + height;
  125. if (navigator.userAgent.match(/MSIE/)) {
  126. // IE gets an OBJECT tag
  127. var protocol = location.href.match(/^https/i) ? 'https://' : 'http://';
  128. 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>';
  129. }
  130. else {
  131. // all other browsers get an EMBED tag
  132. 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" />';
  133. }
  134. return html;
  135. },
  136. hide: function() {
  137. // temporarily hide floater offscreen
  138. if (this.div) {
  139. this.div.style.left = '-2000px';
  140. }
  141. },
  142. show: function() {
  143. // show ourselves after a call to hide()
  144. this.reposition();
  145. },
  146. destroy: function() {
  147. // destroy control and floater
  148. if (this.domElement && this.div) {
  149. this.hide();
  150. this.div.innerHTML = '';
  151. var body = document.getElementsByTagName('body')[0];
  152. try { body.removeChild( this.div ); } catch(e) {;}
  153. this.domElement = null;
  154. this.div = null;
  155. }
  156. },
  157. reposition: function(elem) {
  158. // reposition our floating div, optionally to new container
  159. // warning: container CANNOT change size, only position
  160. if (elem) {
  161. this.domElement = ZeroClipboard.$(elem);
  162. if (!this.domElement) this.hide();
  163. }
  164. if (this.domElement && this.div) {
  165. var box = ZeroClipboard.getDOMObjectPosition(this.domElement);
  166. var style = this.div.style;
  167. style.left = '' + box.left + 'px';
  168. style.top = '' + box.top + 'px';
  169. }
  170. },
  171. setText: function(newText) {
  172. // set text to be copied to clipboard
  173. this.clipText = newText;
  174. if (this.ready) this.movie.setText(newText);
  175. },
  176. addEventListener: function(eventName, func) {
  177. // add user event listener for event
  178. // event types: load, queueStart, fileStart, fileComplete, queueComplete, progress, error, cancel
  179. eventName = eventName.toString().toLowerCase().replace(/^on/, '');
  180. if (!this.handlers[eventName]) this.handlers[eventName] = [];
  181. this.handlers[eventName].push(func);
  182. },
  183. setHandCursor: function(enabled) {
  184. // enable hand cursor (true), or default arrow cursor (false)
  185. this.handCursorEnabled = enabled;
  186. if (this.ready) this.movie.setHandCursor(enabled);
  187. },
  188. setCSSEffects: function(enabled) {
  189. // enable or disable CSS effects on DOM container
  190. this.cssEffects = !!enabled;
  191. },
  192. receiveEvent: function(eventName, args) {
  193. // receive event from flash
  194. eventName = eventName.toString().toLowerCase().replace(/^on/, '');
  195. // special behavior for certain events
  196. switch (eventName) {
  197. case 'load':
  198. // movie claims it is ready, but in IE this isn't always the case...
  199. // bug fix: Cannot extend EMBED DOM elements in Firefox, must use traditional function
  200. this.movie = document.getElementById(this.movieId);
  201. if (!this.movie) {
  202. var self = this;
  203. setTimeout( function() { self.receiveEvent('load', null); }, 1 );
  204. return;
  205. }
  206. // firefox on pc needs a "kick" in order to set these in certain cases
  207. if (!this.ready && navigator.userAgent.match(/Firefox/) && navigator.userAgent.match(/Windows/)) {
  208. var self = this;
  209. setTimeout( function() { self.receiveEvent('load', null); }, 100 );
  210. this.ready = true;
  211. return;
  212. }
  213. this.ready = true;
  214. this.movie.setText( this.clipText );
  215. this.movie.setHandCursor( this.handCursorEnabled );
  216. break;
  217. case 'mouseover':
  218. if (this.domElement && this.cssEffects) {
  219. this.domElement.addClass('hover');
  220. if (this.recoverActive) this.domElement.addClass('active');
  221. }
  222. break;
  223. case 'mouseout':
  224. if (this.domElement && this.cssEffects) {
  225. this.recoverActive = false;
  226. if (this.domElement.hasClass('active')) {
  227. this.domElement.removeClass('active');
  228. this.recoverActive = true;
  229. }
  230. this.domElement.removeClass('hover');
  231. }
  232. break;
  233. case 'mousedown':
  234. if (this.domElement && this.cssEffects) {
  235. this.domElement.addClass('active');
  236. }
  237. break;
  238. case 'mouseup':
  239. if (this.domElement && this.cssEffects) {
  240. this.domElement.removeClass('active');
  241. this.recoverActive = false;
  242. }
  243. break;
  244. } // switch eventName
  245. if (this.handlers[eventName]) {
  246. for (var idx = 0, len = this.handlers[eventName].length; idx < len; idx++) {
  247. var func = this.handlers[eventName][idx];
  248. if (typeof(func) == 'function') {
  249. // actual function reference
  250. func(this, args);
  251. }
  252. else if ((typeof(func) == 'object') && (func.length == 2)) {
  253. // PHP style object + method, i.e. [myObject, 'myMethod']
  254. func[0][ func[1] ](this, args);
  255. }
  256. else if (typeof(func) == 'string') {
  257. // name of function
  258. window[func](this, args);
  259. }
  260. } // foreach event handler defined
  261. } // user defined handler for event
  262. }
  263. };
// 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:

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8" />
  5. <title>ZeroClipboard demo实例</title>
  6. <script src="../js/ZeroClipboard.js"></script>
  7. <script src="../js/jquery.min.js"></script>
  8. <script>
  9. $(function(){
  10. var clip = new ZeroClipboard( document.getElementById("copy-button"), {
  11. //指定ZeroClipboard.swf的路径
  12. moviePath: "../js/ZeroClipboard.swf"
  13. } );
  14. clip.on( 'load', function(client) {
  15. // alert( "movie is loaded" );
  16. } );
  17. clip.on( 'complete', function(client, args) {
  18. //this.style.display = 'none'; // "this" is the element that was clicked
  19. alert("复制成功，复制的内容为: " + args.text );
  20. } );
  21. clip.on( 'mouseover', function(client) {
  22. // alert("mouse over");
  23. } );
  24. clip.on( 'mouseout', function(client) {
  25. // alert("mouse out");
  26. } );
  27. clip.on( 'mousedown', function(client) {
  28. //在这里为剪贴板赋值
  29. clip.setText($("#_input").val());
  30. } );
  31. clip.on( 'mouseup', function(client) {
  32. // alert("mouse up");
  33. } );
  34. });
  35. </script>
  36. </head>
  37. <body>
  38. <button id="copy-button" title="复制到剪贴板">复制到剪贴板</button>
  39. <input type="text" id="_input">
  40. </body>
  41. </html>
<!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下面好像有点问题，试了一下官网的例子，同样有问题，估计后面的版本会修复

Easy Multiple Copy to Clipboard by ZeroClipboard的更多相关文章

  1. js & click copy to clipboard

    js & click copy to clipboard https://www.cnblogs.com/xgqfrms/p/9999061.html https://www.cnblogs. ...

  2. how to copy to clipboard using windows cmd

    how to copy to clipboard using windows cmd Windows clipboard command line https://www.labnol.org/sof ...

  3. zeroclipboard浏览器复制插件使用记录

    一个简单例子: <html> <body> <button id="copy-button" data-clipboard-text="Co ...

  4. js实现剪切、复制、粘贴——clipBoard.js

    摘要: 最近项目上要实现一个点击按钮复制链接的功能,刚开始查找了一些资料,找了几款插件,ZeroClipboard是通过flash实现的复制功能,随着越来越多的提议废除flash,于是就想能不能通过j ...

  5. ZeroClipboard插件：兼容各浏览器网页复制功能

    常规利用JS编写的网页复制功能只对IE有效,无法做到兼容其它浏览器,代码如下: function copyToClipBoard(){ var clipBoardContent="" ...

  6. 兼容多浏览器的网页复制插件（ZeroClipboard）

    前言: 常规利用JS编写的网页复制功能是最简单的方法,但是只对IE有效,无法做到兼容其它浏览器,对其他浏览器也就只能弹窗提示用户手动复制了. <script type="text/ja ...

  7. 跨浏览器复制神器 ZeroClipboard 2.x快速入门详解

    有些时候,我们希望让用户在网页上完成某个操作就能自动将指定的内容复制到用户计算机的剪贴板中.但是出于安全原因,大多数现代浏览器都未提供通用的剪贴板复制接口(或即便有,也默认被禁用).只有IE浏览器可以 ...

  8. clipboard让复制的文本换行

    https://clipboardjs.com/dist/clipboard.min.js 用clipboard实现复制时, 想让复制的文本换行, 有两咱方法: 第一种, HTML实现: <!- ...

  9. clipboard.js 介绍

    这是著名开源项目 clipboard.js 的 README.md,我把它翻译成中文.发出来,方便自己和他人阅读. 项目地址:https://github.com/zenorocha/clipboar ...

随机推荐

  1. WEB中的cookie

    首先来一篇好文章,刚好看到的: 沉默中的狂怒 —— Cookie 大喷发---------------- http://www.cnblogs.com/index-html/p/mitm-cookie ...

  2. netbeans 快捷键

    前言:今天开始学习使用netbeans , 在此之前,我习惯性的使用 Eclipse 的快捷键,所以,我要改造下~ 1.Application应用程序的参数args的设置,在Build->Set ...

  3. Mysql-日期转换

    一.字符串转日期 下面将讲述如何在MYSQL中把一个字符串转换成日期: 背景:rq字段信息为:20100901 1.无需转换的: SELECT * FROM tairlist_day WHERE rq ...

  4. Java设计模式-模板方法模式（Template Method）

    解释一下模板方法模式,就是指:一个抽象类中,有一个主方法,再定义1...n个方法,可以是抽象的,也可以是实际的方法,定义一个类,继承该抽象类,重写抽象方法,通过调用抽象类,实现对子类的调用,先看个关系 ...

  5. 在VS2012中编译WinXP兼容的程序

    VS2012默认是不兼容Windows XP的,编译链接出来的程序只能在Windows Vista及以上版本的操作系统上运行.可是有时需要在Windows XP上运行,又不得不用VS2012(例如用了 ...

  6. BZOJ-2049 Cave洞穴勘测 动态树Link-Cut-Tree （并查集骗分TAT）

    2049: [Sdoi2008]Cave 洞穴勘测 Time Limit: 10 Sec Memory Limit: 259 MB Submit: 5833 Solved: 2666 [Submit] ...

  7. 【poj2226】 Muddy Fields

    http://poj.org/problem?id=2226 (题目链接) 题意 给出一个只包含‘．’和‘*’的矩阵,用任意长度的宽为1的木板覆盖所有的‘*’而不覆盖‘．’,木板必须跟矩形的长或宽平行 ...

  8. java中的不为空判断

    String不为空判断 if(null != str && !"".equals(str)) List不为空判断 if(list!=null && ...

  9. 快速上手如何使用FluentData

    http://blog.itpub.net/29511780/viewspace-1194048/ 目录:  一.什么是ORM? 二.使用ORM的优势 三.使用ORM的缺点 四.NET下的ORM框架有 ...

  10. 网络html查看器

    1)演示效果: