js 複製到剪貼簿--ZeroClipboard 2.0
ZeroClipboard:
是一套提供了將文字複製到剪貼簿的類庫,它通過使用不可見的 Adobe Flash movie(這裡的不可見我的理解是透明,因為檢視頁面結構時發現他是覆蓋在我們寫的 “複製”按鈕之上的) 和 js介面 來實現的。這個 “Zero”意味這看不到,不會影響我們的頁面,頁面結構或都說檢視效果還是按我們的意願來定義。
侷限:
由於瀏覽器和flash的安全限制,只有當用戶點選不可見的flash movie時才能實現對剪貼簿內容的修改,js模擬的點選是不可以的,這個可能導致剪貼簿中毒。
還有一些限制,如:複製時同時有其他程式對剪貼簿操作的問題 以及 客戶端的作業系統的問題,感覺一般不會遇到,因為大部分用的都是Window,在此就不進行說明了,如果遇到些類問題可以點此檢視。
下載
使用樣例(對官網例子的修改)
呼叫前在頁面中引入js,併為ZeroClipboard配置Adobe Flash movie。
<script type="text/javascript" src="{resourceRoot}/pubjs/ZeroClipboard/ZeroClipboard.min.js"></script>
<script type="text/javascript">
// 如果ZeroClipboard.min.js與ZeroClipboard.swf在同一個目錄下可以不配,
// 但可能會因為引用ZeroClipboard.min.js的頁面所在目錄不同,會找不到ZeroClipboard.swf,建議
// 在此為ZeroClipboard配上全路徑
ZeroClipboard.config( { swfPath: "{resourceRoot}/pubjs/ZeroClipboard/ZeroClipboard.swf" } );
</script>
1)最簡單
1.1)使用data-clipboard-text 屬性
<button id="copy-button" data-clipboard-text="要複製的文字" title="Click to copy me.">複製到剪貼簿</button>
<script type="text/javascript">
var client = new ZeroClipboard( document.getElementById("copy-button") );
</script>
這樣點選按鈕【複製到剪貼簿】 就可以將 “data-clipboard-text” 的值 賦值到剪貼簿。
1.2)使用“data-clipboard-target”屬性。
<button id="copy-button" data-clipboard-target='copyTextTagId' title="Click to copy me.">複製到剪貼簿</button>
<input id="copyTextTagId" value="要複製的文字" />
<script type="text/javascript">
var client = new ZeroClipboard( document.getElementById("copy-button") );
</script>
這樣點選按鈕【複製到剪貼簿】 就可以將id為 “data-clipboard-target” 值的標籤的內容 賦值到剪貼簿。
2)複雜點的
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript" src="ZeroClipboard.js"></script>
<div class="clip_button">Copy To Clipboard</div>
<div class="clip_button">Copy This Too!</div>
<script type="text/javascript">
var client = new ZeroClipboard( $('.clip_button') ); // 可以用jquery物件
client.on( 'ready', function(event) { // 載入swf
// console.log( 'movie is loaded' );
client.on( 'copy', function(event) {
// 新增複製操作
event.clipboardData.setData('text/plain', event.target.innerHTML);
} );
client.on( 'aftercopy', function(event) {
// 複製操作
console.log('Copied text to clipboard: ' + event.data['text/plain']);
} );
});
client.on( 'error', function(event) {
// console.log( 'ZeroClipboard error of type "' + event.name + '": ' + event.message );
ZeroClipboard.destroy();
});
</script>
通過上述的說明,基本上是可以滿足大部分複製需求了,如果還不滿意,可以到官網檢視詳細的說明。
相關推薦
js 複製到剪貼簿--ZeroClipboard 2.0
複製到剪貼簿 這個功能算是比較常見的,但是如果單純的使用js很難做到相容所有的瀏覽器,百度了一下,查到了 Zero Clipboard 這個由flash 以及 js 共同實現的庫。Zero Clipboard 的最新版本是 2.1.6,但大部中文文章都
nw.js 實現 剪貼簿的複製copy 貼上功能 --clipboard api
nw.js node-webkit系列(10)Native UI API Clipboard的使用開發文件 clipboard api: http://liuxp.me/nwjs/References/Clipboard/參考網址:http://blog.csdn.net/z
JS操作剪貼簿
分享一下我老師大神的人工智慧教程!零基礎,通俗易懂!http://blog.csdn.net/jiangjunshow 也歡迎大家轉載本篇文章。分享知識,造福人民,實現我們中華民族偉大復興!  
js讀取剪貼簿內容
注:該讀取剪貼簿方法存在瀏覽器相容問題,適用於ie,不適用於firefox、google,報錯Uncaught ReferenceError: clipboardData is not defined 以下是讀取剪貼簿內容的js程式碼: <script> var text
Mac Alfred快速複製剪貼簿和指定文字
這裡主要考慮如下兩種需求 快速喚出剪貼簿歷史,並複製某一項 快速複製某一段固定內容的文字 第一項在Mac上有很多小工具實現,第二項在輸入密碼時經常會碰到,比如我在終端sudo執行命令或者連線redis資料庫時需要輸入密碼,這些密碼我又不想人肉記住,希望每
Android Clipboard(複製/剪貼簿)
Android提供的剪貼簿框架,複製和貼上不同型別的資料。資料可以是文字,影象,二進位制流資料或其它複雜的資料型別。 Android提供ClipboardManager、ClipData.Item和ClipData庫使用複製和貼上的框架。為了使用剪貼簿的框架,需要把資料轉化為剪輯物件,然後把該物件為全系統剪
Android App實現點選撥號、複製剪貼簿、新增手機聯絡人
1.概述 今天介紹一下實現Android App內實現點選撥號、複製剪貼簿、新增手機聯絡人等相關操作 2.實現效果 沒有gif圖 3.實現步驟 直接上程式碼: private void initService() { String[] info = n
選擇複製剪貼簿裡面的內容——小工具
在使用電腦的時候我麼經常會多次複製很多東西,每次按Ctrl+C複製出來的東西是眾多複製內容中最近複製的一條內容,經常這條內容並不是我們真正需要的,而是之前複製的某條內容。此時最希望有一個不佔太多記憶體
JS 過濾剪貼簿中的WORD程式碼
function filtrate()//過濾剪貼簿中的WORD程式碼{ var html=clipboardData.getData("text"); html = html.replace(/<//?SPAN[^>]*>/g
js猜數字小遊戲2.0——原創
今天把之前的猜數字改了一下,不過彈出視窗會阻止定時器執行,查了半天資料暫時沒有找到解決辦法。 <!doctype html><html lang="cn"> <head> <meta charset="UTF-8"> <title>猜數字</
js設定剪貼簿資料 event.clipboardData.setData("text/plain",value);不起作用,並非所有的瀏覽器都支援,限制了
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> </head> &
js處理剪貼簿的內容
在學習這個知識點之前需要了解的是: 在網頁中一般是不允許訪問“剪貼簿”的,因為這樣存在著很大的安全隱患 在IE和FF中剪貼簿的訪問是可控的,但是在Opera、Chrome、Safari瀏覽器中是不允
JS實現各種複製到剪貼簿
一、實現點選按鈕,複製文字框中的的內容 <script type="text/javascript"> function copyUrl2() { var Url2=document.getElementById("biao1"); Url2.sele
clipboard.js 實現移動端和pc端複製到剪貼簿功能
感謝以下兩個具有幫助性的部落格: 在vue中使用clipboard.js 時候發現一個問題,就是如果 :data-clipboard-text = “wechat”使用這個屬性的話在移動端就不
使用ZeroClipboard解決跨瀏覽器複製到剪貼簿的問題
Zero Clipboard的實現原理 Zero Clipboard 利用透明的Flash讓其漂浮在複製按鈕之上,這樣其實點選的不是按鈕而是 Flash ,這樣將需要的內容傳入Flash,再通過Flash的複製功能把傳入的內容複製到剪貼簿。 Zero Clipboard的安
js實現複製到剪貼簿
以前用js實現複製內容到剪貼簿是比較麻煩的,不過總有大神給我們提供各種庫,如clipboard.js,所以一切變得比較簡單了。 下載地址:https://clipboardjs.com/ <!DOCTYPE html> <html lang="en"&g
點選按鈕複製到剪貼簿 js
<span style="font-family: Arial, Helvetica, sans-serif;">案例一:</span></pre><pre code_snippet_id="1755225" snippet_fil
clipboard.js實現複製黏貼到剪貼簿
在開發過程中難免會遇到點選分享的需求,這裡有兩種實現方式: 第一種: 通過原生js 的方法用(存在相容性): document.execCommand( aCommandName, aShowDefaultUI, aValueArgument**)** 引數說明:&nbs
JS複製內容到剪貼簿(相容FF/Chrome/Safari所有瀏覽器)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.
js實現複製到剪貼簿功能,相容所有瀏覽器
前段時間做專案的時候,有點選按鈕複製文字的需求,想使用操作windows剪下板實現,在網上查了些資料,發現目前好像只有IE支援直接訪問剪下板,實現需求的時候也只做了IE中的點選複製功能,其餘瀏覽器: if(window.clipboardData){ window.clip