基于js實(shí)現(xiàn)復(fù)制內(nèi)容到操作系統(tǒng)粘貼板過程解析
一、如果只考慮IE瀏覽器，可以直接用原聲js實(shí)現(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插件需要用到以下三個(gè)文件：
- ZeroClipboard.js
- ZeroClipboard.min.js
- ZeroClipboard.swf
這個(gè)插件需要瀏覽器的flash控件支持，復(fù)制時(shí)先把內(nèi)容復(fù)制到flash里面，再利用flash將內(nèi)容復(fù)制到
操作系統(tǒng)。flash控件又被淘汰的可能，有些瀏覽器上兼容得也不太好，所以這個(gè)插件不太好用。
2.用clipboard.js插件需要用到以下一個(gè)文件：
clipboard.min.js
執(zhí)行復(fù)制功能的html標(biāo)簽上需要加上一個(gè)屬性和一個(gè)樣式，屬性data-clipboard-text的值表示要復(fù)制的內(nèi)容，
樣式j(luò)s-copy表示該標(biāo)簽被綁定上點(diǎn)擊復(fù)制的功能，在點(diǎn)擊該標(biāo)簽時(shí)觸發(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]);});
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
- js復(fù)制文本到粘貼板(Clipboard.writeText())
- H5 js點(diǎn)擊按鈕復(fù)制文本到粘貼板
- 20行JS代碼實(shí)現(xiàn)粘貼板復(fù)制功能
- JS復(fù)制對(duì)應(yīng)id的內(nèi)容到粘貼板（Ctrl+C效果）
- JavaScript實(shí)現(xiàn)復(fù)制內(nèi)容到粘貼板代碼
- js實(shí)現(xiàn)點(diǎn)擊圖片將圖片地址復(fù)制到粘貼板的方法
- js 實(shí)現(xiàn)復(fù)制到粘貼板的功能代碼
- JS復(fù)制特定內(nèi)容到粘貼板
- Web js實(shí)現(xiàn)復(fù)制文本到粘貼板
相關(guān)文章
背景：很久之前就在marry5.com看到這個(gè)效果，當(dāng)時(shí)覺得很神奇，礙于水平有限，沒做出來。2008-09-09
BootStrap modal模態(tài)彈窗使用小結(jié)
這篇文章主要為大家詳細(xì)介紹了BootStrap modal模態(tài)彈窗使用小結(jié),具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-10-10
Javascript動(dòng)畫插件lottie-web的使用方法
這篇文章主要介紹了Javascript動(dòng)畫插件lottie-web的使用方法，包括配合vue-cli使用及在HTML頁面中使用代碼，本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2022-02-02
javascript刪除數(shù)組元素的七個(gè)方法示例
這篇文章主要給大家介紹了關(guān)于javascript刪除數(shù)組元素的七個(gè)方法，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家學(xué)習(xí)或者使用javascript具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧2019-09-09
這篇文章主要介紹了微信js-sdk界面操作接口用法,結(jié)合實(shí)例形式分析了微信界面操作的相關(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)載傳播請(qǐng)保留版權(quán)2008-06-06
這篇文章主要和大家談一談bootstrap響應(yīng)式布局，本教程講解如何在網(wǎng)頁布局中應(yīng)用響應(yīng)式設(shè)計(jì)，感興趣的小伙伴們可以參考一下2016-05-05
微信小程序picker組件下拉框選擇input輸入框的實(shí)例
這篇文章主要介紹了微信小程序picker組件下拉框選擇input輸入框的實(shí)例的相關(guān)資料,希望通過本文能幫助到大家，需要的朋友可以參考下2017-09-09
表單元素事件 (Form Element Events)僅在表單元素中有效。2009-07-07
微信小程序開發(fā)之實(shí)現(xiàn)自定義Toast彈框
Toast相信對(duì)于利用微信小程序開發(fā)的朋友們來說都不陌生，有時(shí)候官方的樣式并不能滿足業(yè)務(wù)要求，怎么辦呢，當(dāng)然有解決辦法了。有一個(gè)插件可以直接幫我們完成WeToast，這篇文章主要給大家介紹了微信小程序開發(fā)之實(shí)現(xiàn)自定義Toast彈框的相關(guān)資料，需要的朋友可以參考下。2017-06-06