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

  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. JSP中<base href="<%=basePath%>">的作用

    来源于:http://fanshuyao.iteye.com/blog/2097229 首先了解是什么是<base href=""> <base href=&qu ...

  2. 【codevs 1296】营业额统计 水～～

    今天下午先写一个Splay水题来复习一下Splay模板.是不是有点太水了做这种水题我有点良心不安. 可笑的是一开始我竟然WA了一组,看来是我低估水题的数据范围了,我是空节点直接返回inf或-inf,明 ...

  3. 在 Visual Studio 2013 中创建 ASP.NET Web 项目（0）：专题导航 [持续更新中]

    写在前面的话 随着 Visual Studio 2013 的正式推出,ASP.NET 和 Visual Studio Web 开发工具 也发布了各自的最新版本. 新版本在构建 One ASP.NET ...

  4. Netbeans 中的编译器相关配置

    gcc-core:C 编译器 gcc-g++:C++ 编译器 gdb:GNU 调试器 make:"make" 实用程序的 GNU 版本

  5. web.xml中/与/*的区别

    1.拦截"/",可以实现现在很流行的REST风格.很多互联网类型的应用很喜欢这种风格的URL.为了实现REST风格,拦截了所有的请求.同时对*.js,*.jpg等静态文件的访问也就 ...

  6. PowerDesigner更改数据库类型

    如图,直入:

  7. 数组实现栈的结构（java）

    自定义数组实现栈的结构. package test; public class MyArrayStackClient { public static void main(String[] args) ...

  8. Longest Increasing Common Subsequence (LICS)

    最长上升公共子序列(Longest Increasing Common Subsequence,LICS)也是经典DP问题,是LCS与LIS的混合. Problem 求数列 a[1..n], b[1. ...

  9. PHP局部变量与全局变量

    一.局部变量定义:在函数内部声明,且只能在函数内部调用的变量. 注意:参数也是局部变量的一种. demo1:1 function demo1(){2     $age = 10;3 }4 5 echo ...

  10. 检测ADO.net拼接字符串中非法字符

    using System;using System.Collections.Generic;using System.Linq;using System.Text;using System.Refle ...