基于js實(shí)現(xiàn)復(fù)制內(nèi)容到操作系統(tǒng)粘貼板過程解析

更新時(shí)間：2019年10月11日 09:50:18 作者：德邦總管

這篇文章主要介紹了基于js實(shí)現(xiàn)復(fù)制內(nèi)容到操作系統(tǒng)粘貼板過程解析,文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下

一、如果只考慮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í)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

JavaScript 圖片放大鏡（可拖放、縮放效果）
背景：很久之前就在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界面操作接口用法示例
這篇文章主要介紹了微信js-sdk界面操作接口用法,結(jié)合實(shí)例形式分析了微信界面操作的相關(guān)接口功能與使用技巧,需要的朋友可以參考下
2016-10-10
JavaScript 應(yīng)用類庫代碼
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)式布局
這篇文章主要和大家談一談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)
表單元素事件 (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