Zero Clipboard-js複製到剪切板（支持多瀏覽器）

時間 2019-11-08

標籤 zero clipboard 複製剪切板支持瀏覽器欄目 JavaScript 简体版

原文原文鏈接

在前端開發中常常會遇到這樣的問題，要求用js將輸入框或者div中的內容複製到剪切板。在ie下能夠經過clipboardData.setData來實現，可是這個方法卻不能兼容其餘的瀏覽器。顯然這種方法在這個瀏覽器異軍突起的年代是行不通的。可是如何實現複製內容到剪切板可以兼容多瀏覽器呢，顯然js在這裏是江郎才盡了，這裏咱們須要用js+flash的組合來實現跨瀏覽器支持複製到剪切板的操做。javascript

這裏用到的是外國友人「Joseph Huckaby」寫的Zero Clipboard的js庫，結合flash（對flash不熟悉，我感受應該是actionscript腳本，清楚的朋友明示一下）來實現將文本內容複製到剪切板。項目主頁【Zero Clipboard】,下載地址【Google code 下載連接】【115網盤下載地址】css

Zero Clipboard的安裝使用：

下載壓縮包，獲得兩個「ZeroClipboard.js」和「ZeroClipboard.swf」兩個文件。html

首先頁面中載入ZeroClipboard.js前端

<script type="text/javascript" src="ZeroClipboard.js"></script>java

須要注意：ZeroClipboard.js, ZeroClipboard.swf在同一目錄下面。若是不在同一目錄，可以使用ZeroClipboard.setMoviePath( 「Flash路徑」 );來指定ZeroClipboard.swf的地址。jquery

而後插入js腳本瀏覽器

<script type="text/javascript">
    var clip = new ZeroClipboard.Client();//新建對象
    clip.setText( '大爺您來啦！' );//設置要複製的內容
    clip.glue( 'clip_button' );//綁定到一個id爲clip_button的元素上
</script>

下面看一個簡單的案例：ide

<html>
<body>
<script type="text/javascript" src="http://www.niumowang.org/wp-content/plugins/pizi_run_code/ZeroClipboard.js"></script>
<div id="clip_button" style="border:1px solid black; padding:20px;width:150px;">
	點擊複製到剪切板
</div>
<textarea style="width:300px;height:100px;margin-top:20px;">粘貼到這裏</textarea>
<script language="JavaScript">
                        var clip = new ZeroClipboard.Client();
                        clip.setText( '摸我啊，來摸我!' );
                        clip.glue( 'clip_button' );
                </script>
</body>
</html>

運行代碼複製代碼另存代碼(提示：能夠編輯後運行)函數

Zero Clipboard 的高級進階（設置選項）：

若是ZeroClipboard.swf與js不在同一目錄，載入flash的路徑
this

ZeroClipboard.setMoviePath( 'http://yourhost/ZeroClipboard.swf' ); //採用絕對路徑或者相對路徑
設置鼠標移動上去形狀

clip.setHandCursor( true );//true的時候爲手型，false爲箭頭
將元素綁定到事件，即點擊哪一個按鈕實現複製功能

clip.glue( 'd_clip_button' );//d_clip_button爲綁定的元素的ID
flash從新定位flash的位置採用相對於頁面absolute，因此當頁面大小改變或者按鈕的位置的改變的時候，flash的位置並不能跟隨改變。「clip.reposition();」就是爲解決這個問題而存在的。
設置flash的顯隱

clip.hide();或者clip.show();//show函數能夠出發reposition()事件
Css事件因爲有flash的遮擋，因此當鼠標移動到元素上的時候，原來的:hover,:active等僞類不會起做用。這時候咱們就須要將原來的僞類變成類，好比"a:hover" 變成"a.hover"來實現。這裏用到的是該庫中的setCSSEffects()函數，默認爲開啓狀態。能夠經過「clip.setCSSEffects( false );」來關閉。
設置flash的大小

var html = clip.getHTML( 150, 20 );//關於原文的解釋我不是很清楚，只知道經過此方法能夠設置flash的大小，兩個參數對應寬高

Zero Clipboard 的事件處理函數：

能夠經過「clip.addEventListener( 'zeroClipboard的事件', 執行函數);」來實現函數與事件的綁定操做。

onLoad 加載完成事件
onMouseOver 鼠標移上事件
onMouseOut 鼠標移出事件
onMouseDown 鼠標按下事件
onMouseUp 鼠標鬆開事件
onComplete 複製成功事件
destroy 中斷事件，好比複製一次後不能繼續執行，能夠經過「 clip.destroy(); 」來中斷

綁定事件的示例
clip.addEventListener( 'onComplete', my_complete );
function my_complete(){
alert("複製成功！成功複製！");
}

Zero Clipboard 結合jquery的高級用法（示例）：

基本參數上面已經說的比較清晰了，下面給你們一個結合jquery使用的示例。

<html>
<head>
<title>Zero Clipboard 結合jquery使用示例</title>
<style type="text/css">
		body { font-family: "Microsoft YaHei","微軟雅黑" !important; font-size:9pt; }
		div.multiple {
			float: left;
			background-color: white;
			width:200px; height:200px;
			border:1px solid #ccc;
			margin:5px;
			cursor: pointer;
			font-size: 14pt;
		}
		div.multiple.hover {
			background-color: #ddd;
		}
</style>
<script type="text/javascript" src="http://www.niumowang.org/wp-content/themes/pizi/jquery-1.6.4.min.js"></script>
<script type="text/javascript" src="http://www.niumowang.org/wp-content/plugins/pizi_run_code/ZeroClipboard.js"></script>
<script language="JavaScript">
		var clip = null;
		function init() {
			clip = new ZeroClipboard.Client();//建立對象
			clip.setHandCursor( true );//鼠標手型
			$('div.multiple').mouseover( function() {
				clip.setText( this.innerHTML );//設置複製的內容
				if (clip.div) {
					clip.receiveEvent('mouseout', null);
					clip.reposition(this);
				}//若是已經存在flash，那麼從新定位
				else clip.glue(this);
				clip.receiveEvent('mouseover', null);
			} );
		}
	</script>
</head>
<body onload="init()">
<h1>Zero Clipboard 結合jquery使用示例</h1>
<div class="multiple">
	 Hello啊，樹哥！
</div>
<div class="multiple">
	 請問，你認識春爺嗎？
</div>
<div class="multiple">
	 賈君鵬，你媽媽喊你回去搓麻將！
</div>
<div class="multiple">
	 我愛你的時候，你打我罵我，我都忍了，我不愛你了，你再碰我試試。
</div>
<div class="multiple">
	 再發嗲，也改變不了你奔三的年齡和樣貌！
</div>
<div class="multiple">
	 你看與不看，你知道與不知道，牛魔王的世界觀都是這樣的！
</div>
<div style="clear:both;">
</div>
<br/><br/> 把你的狗皮膏藥貼到這裏:<br/>
<textarea id="testarea" cols='50' rows='10'></textarea><br/>
<input type='button' value="清除文本框的內容" onclick="document.getElementById('testarea').value = '';"/>
</body>
</html>

運行代碼複製代碼另存代碼(提示：能夠編輯後運行)

多說無益，更多詳細的介紹仍是去看原文吧！