JS實(shí)現(xiàn)復(fù)制內(nèi)容到剪貼板功能
前記：本來(lái)原生的JS是有提供一個(gè)函數(shù)來(lái)實(shí)現(xiàn)這個(gè)功能(window.clipboardData)，但是很遺憾，這個(gè)函數(shù)僅僅支持IE和FF瀏覽器，所以基本用處不大。下邊介紹的是一個(gè)第三方插件庫(kù)(ZeroClipboard.js)。
ZeroClipboard.js在Git上的地址為：https://github.com/zeroclipboard/zeroclipboard
注意：此js庫(kù)不支持兼容手機(jī)端(包括Android、IOS)，僅支持PC端瀏覽器。
第一步：將插件庫(kù)引入到工程中。
把Git上的dist目錄copy到自己的目錄中(其實(shí)只需要ZeroClipboard.js和ZeroClipboard.swf就OK~)
腳本文件引入：
<script src="ZeroClipboard.js"></script>
第二步：初始化插件庫(kù)。
var clip = new ZeroClipboard( document.getElementById("d_clip_button"), {
moviePath: "ZeroClipboard.swf"
} );
第三步：上代碼。
<!DOCTYPE html>
<html>
<head>
<title>Zero Clipboard Test</title>
<meta charset="utf-8">
</head>
<body>
<!--
說(shuō)明：
1.data-clipboard-target 輸入要復(fù)制的對(duì)象的ID
-->
<button id="d_clip_button" class="my_clip_button" data-clipboard-target="fe_text"><b>復(fù)制到剪貼板</b></button>
<br/>
<textarea id="fe_text" cols="50" rows="3">輸入需要復(fù)制的內(nèi)容</textarea>
</body>
</html>
<script type="text/javascript" src="ZeroClipboard.js"></script>
<script type="text/javascript">
//初始化復(fù)制對(duì)象
var clip = new ZeroClipboard( document.getElementById("d_clip_button"), {
moviePath: "ZeroClipboard.swf"
} );
//復(fù)制內(nèi)容到剪貼板成功后的操作
clip.on( 'complete', function(client, args) {
alert("復(fù)制成功，復(fù)制內(nèi)容為："+ args.text);
} );
</script>
以上示例代碼注釋中已經(jīng)對(duì)Zero Clipboard的功能進(jìn)行了介紹，需要了解更多的功能請(qǐng)到https://github.com/zeroclipboard/ZeroClipboard
注意：運(yùn)行環(huán)境必須在服務(wù)器環(huán)境下，否則看不到效果！
以上就是本文的全部?jī)?nèi)容，希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作能帶來(lái)一定的幫助，同時(shí)也希望多多支持腳本之家！
- js實(shí)現(xiàn)各種復(fù)制到剪貼板的方法(分享)
- JavaScript復(fù)制內(nèi)容到剪貼板的兩種常用方法
- vue中js實(shí)現(xiàn)點(diǎn)擊復(fù)制文本到剪貼板的3種方案
- JS實(shí)現(xiàn)復(fù)制內(nèi)容到剪貼板功能兼容所有瀏覽器(推薦)
- js復(fù)制內(nèi)容到剪貼板代碼,js復(fù)制代碼的簡(jiǎn)單實(shí)例
- 一段多瀏覽器的"復(fù)制到剪貼板"javascript代碼
- JavaScript實(shí)現(xiàn)復(fù)制或剪切內(nèi)容到剪貼板功能的方法
- JS復(fù)制到剪貼板示例代碼
- JavaScript實(shí)現(xiàn)頁(yè)面點(diǎn)擊復(fù)制到剪粘版并解決報(bào)錯(cuò)問(wèn)題
相關(guān)文章
JavaScript如何從listbox里同時(shí)刪除多個(gè)項(xiàng)目
要從列表框同時(shí)刪除多個(gè)項(xiàng)目只能從下向上刪除，這樣就不會(huì)出現(xiàn)索引號(hào)亂變的問(wèn)題了，下面有個(gè)不錯(cuò)的示例，大家可以感受下2013-10-10
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)九宮格抽獎(jiǎng)，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-01-01
這幾天在做一個(gè)文件管理的模塊，里面有排序的功能，產(chǎn)品經(jīng)理看了說(shuō)希望能做出更加智能的文件排序功能，就像是win7的名稱排序一樣，主要就是文件名中的數(shù)字會(huì)按大小排序，而不是直接按ascii碼 ,這兩天晚上沒(méi)事，就先寫(xiě)了這個(gè)排序方法，下個(gè)版本中就可以用上了2010-08-08
這篇文章主要為大家詳細(xì)介紹了Openlayers繪制地圖標(biāo)注，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-09-09
js判斷價(jià)格,必須為數(shù)字且不能為負(fù)數(shù)的實(shí)現(xiàn)方法
下面小編就為大家?guī)?lái)一篇js判斷價(jià)格,必須為數(shù)字且不能為負(fù)數(shù)的實(shí)現(xiàn)方法。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-10-10
這篇文章主要介紹了JavaScript中的數(shù)值范圍介紹,本文是對(duì)JavaScript中Number類型的追根究底,讀完本文將會(huì)對(duì)Number類型有一個(gè)徹底了解,需要的朋友可以參考下2014-12-12
原生javascript圖片自動(dòng)或手動(dòng)切換示例附演示源碼
圖片自動(dòng)或手動(dòng)切換，想必會(huì)在很多地方有見(jiàn)過(guò)吧，本文將為大家介紹的是使用原生javascript實(shí)現(xiàn)的焦點(diǎn)圖切換，感興趣的朋友可以參考下2013-09-09
FF IE兼容性的修改小結(jié)，大家以后在javascript的編寫(xiě)過(guò)程中需要注意下。2009-09-09
JS中函數(shù)科里化的背景與應(yīng)用實(shí)例教程
在數(shù)學(xué)和計(jì)算機(jī)科學(xué)中,柯里化是一種將使用多個(gè)參數(shù)的一個(gè)函數(shù)轉(zhuǎn)換成一系列使用一個(gè)參數(shù)的函數(shù)的技術(shù),下面這篇文章主要給大家介紹了JS中函數(shù)科里化的背景與應(yīng)用實(shí)例的相關(guān)資料,需要的朋友可以參考下2022-06-06
利用JQuery和JS實(shí)現(xiàn)奇偶行背景顏色自定義效果
本文將詳細(xì)介紹利用JQuery和JS實(shí)現(xiàn)奇偶行背景顏色自定義效果,需要的朋友可以參考下2012-11-11