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

  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. new-nav-html

    <header id="masthead" class="masthead" role="banner"> <h1 cla ...

  2. HTML5动画实例

    <!doctype html> <html> <head> <meta charset="utf-8"> <title> ...

  3. 【CodeForces 520E】Pluses everywhere

    题意 n个数里插入k个+号,所有式子的和是多少(取模1000000007) (0 ≤ k < n ≤ 105). 分析 1.求答案,考虑每个数作为i位数(可为答案贡献10的i-1次方,个位i=1 ...

  4. @RestController注解下返回到jsp视图页面(转)(转)

    这个问题我也遇到过,下面的方法可以试试 蓝萝卜blu @RestController注解下返回到jsp视图页面 spring4.1中添加了@RestController注解很方便,集成了@Respon ...

  5. 洛谷P1755 攻击火星

    题目描述 一群外星人将要攻击火星. 火星的地图是一个n个点的无向图.这伙外星人将按照如下方法入侵,先攻击度为0的点(相当于从图中删除掉它),然后是度为1的点,依此类推直到度为n-1的点. 所有的点度统 ...

  6. java连接mysql（一）

    import java.sql.*; public class MysqlTest { public static void main(String[] args) throws SQLExcepti ...

  7. win7下面完全删除mysql

    今天因为一些原因重装完成mysql的时候,在启动mysql服务的时候,一直卡死在哪快.最后整的都无语了. 在google里搜索:mysql安装失败 ,会找到一堆类似的问题汇总,其实上面说的方法都是正确 ...

  8. HDU 1060 Left-most Digit

    传送门 Leftmost Digit Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Other ...

  9. 【基础语法】a++与++a的区别

    package com.on.learn.e2; /** * @author lj * 自增:a++与++a a++是指本行表达式不使用a自增后的值,++a是指本行开始就已经使用a自增后的值 * */ ...

  10. POJ1845Sumdiv（求所有因子和 + 唯一分解定理）

    Sumdiv Time Limit: 1000MS   Memory Limit: 30000K Total Submissions: 17387   Accepted: 4374 Descripti ...