基于js實現(xiàn)復(fù)制內(nèi)容到操作系統(tǒng)粘貼板過程解析
更新時間：2019年10月11日 09:50:18 作者：德邦總管
這篇文章主要介紹了基于js實現(xiàn)復(fù)制內(nèi)容到操作系統(tǒng)粘貼板過程解析,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下
一、如果只考慮IE瀏覽器，可以直接用原聲js實現(xiàn)(兼容IE、谷歌、火狐等瀏覽器)
if(window.clipboardData){
//清空操作系統(tǒng)粘貼板
window.clipboardData.clearData();
//將需要復(fù)制的內(nèi)容復(fù)制到操作系統(tǒng)粘貼板
window.clipboardData.setData("Text", "要復(fù)制的內(nèi)容");
}
二、如果是其他瀏覽器，上面的辦法行不通，其他瀏覽器出于安全的考慮禁止js訪問操作系統(tǒng)粘貼板。
這里需要用到插件，網(wǎng)上流行的插件有兩種，一種是ZeroClipboard.js，一種是clipboard.js。
插件下載地址：https://zenorocha.github.io
1.用ZeroClipboard.js插件需要用到以下三個文件：
- ZeroClipboard.js
- ZeroClipboard.min.js
- ZeroClipboard.swf
這個插件需要瀏覽器的flash控件支持，復(fù)制時先把內(nèi)容復(fù)制到flash里面，再利用flash將內(nèi)容復(fù)制到
操作系統(tǒng)。flash控件又被淘汰的可能，有些瀏覽器上兼容得也不太好，所以這個插件不太好用。
2.用clipboard.js插件需要用到以下一個文件：
clipboard.min.js
執(zhí)行復(fù)制功能的html標(biāo)簽上需要加上一個屬性和一個樣式，屬性data-clipboard-text的值表示要復(fù)制的內(nèi)容，
樣式j(luò)s-copy表示該標(biāo)簽被綁定上點擊復(fù)制的功能，在點擊該標(biāo)簽時觸發(fā)復(fù)制功能。
該插件兼容IE、谷歌、火狐等瀏覽器。
js示例代碼如下：
$("span").each(function(index,element){if(element.innerHTML=="復(fù)制")new Clipboard($(element).parent().attr("data-clipboard-text",Ext.fly(html).dom.innerText).addClass("js-copy")[0]);});
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
背景：很久之前就在marry5.com看到這個效果，當(dāng)時覺得很神奇，礙于水平有限，沒做出來。2008-09-09
BootStrap modal模態(tài)彈窗使用小結(jié)
這篇文章主要為大家詳細(xì)介紹了BootStrap modal模態(tài)彈窗使用小結(jié),具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-10-10
這篇文章主要介紹了Javascript動畫插件lottie-web的使用方法，包括配合vue-cli使用及在HTML頁面中使用代碼，本文給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下2022-02-02
這篇文章主要給大家介紹了關(guān)于javascript刪除數(shù)組元素的七個方法，文中通過示例代碼介紹的非常詳細(xì)，對大家學(xué)習(xí)或者使用javascript具有一定的參考學(xué)習(xí)價值，需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧2019-09-09
這篇文章主要介紹了微信js-sdk界面操作接口用法,結(jié)合實例形式分析了微信界面操作的相關(guān)接口功能與使用技巧,需要的朋友可以參考下2016-10-10
S.Sams Lifexperience CopyRight (C) 2003-2007 S.Sams Lifexperience ScriptClassLib MSNLive: S.Sams#msn.com Update by : 2007-01-19 轉(zhuǎn)載傳播請保留版權(quán)2008-06-06
這篇文章主要和大家談一談bootstrap響應(yīng)式布局，本教程講解如何在網(wǎng)頁布局中應(yīng)用響應(yīng)式設(shè)計，感興趣的小伙伴們可以參考一下2016-05-05
這篇文章主要介紹了微信小程序picker組件下拉框選擇input輸入框的實例的相關(guān)資料,希望通過本文能幫助到大家，需要的朋友可以參考下2017-09-09
表單元素事件 (Form Element Events)僅在表單元素中有效。2009-07-07
微信小程序開發(fā)之實現(xiàn)自定義Toast彈框
Toast相信對于利用微信小程序開發(fā)的朋友們來說都不陌生，有時候官方的樣式并不能滿足業(yè)務(wù)要求，怎么辦呢，當(dāng)然有解決辦法了。有一個插件可以直接幫我們完成WeToast，這篇文章主要給大家介紹了微信小程序開發(fā)之實現(xiàn)自定義Toast彈框的相關(guān)資料，需要的朋友可以參考下。2017-06-06