[譯] 復(fù)制文本到剪切板的clipboard.js使用方法

itvincent 發(fā)布于2019-08-26 10:29 / 2561人閱讀

摘要：為什么復(fù)制文本到剪貼板應(yīng)該不難。在內(nèi)部我們需要獲取所有匹配的元素選擇器并且為它們每一個(gè)添加上事件偵聽器。因?yàn)檫@個(gè)原因我們使用事件代理通過(guò)一個(gè)偵聽器取代了多個(gè)事件監(jiān)聽器。從另一個(gè)元素復(fù)制文本常見的用例是復(fù)制另一個(gè)元素的內(nèi)容。

工作中需要使用到的一個(gè)復(fù)制插件，使用簡(jiǎn)單兼容性還行，因?yàn)闆](méi)找到中文版介紹就自己翻譯一下，水平有限，不一定全按文章走，如果有問(wèn)題歡迎指正！！
為了更加直觀的展示用法,略微修改下代碼讓你們可以每個(gè)代碼都直接看到效果,引用第三方地址可以放心拉到本地運(yùn)行.
原文地址https://clipboardjs.com/

clipboard.js能夠用現(xiàn)代的方法來(lái)將文本復(fù)制到剪貼板上，不依賴Flash，不依賴框架，并且衹有3kb大小。

為什么？
復(fù)制文本到剪貼板應(yīng)該不難。它不需要許多步驟來(lái)配置或加載數(shù)百KBs大小文件。但最重要的是,它不應(yīng)該依賴Flash或任何臃腫的框架。
這就是為什么clipboard.js的存在。

安裝

你可以在npm。

npm install clipboard --save

或者瀏覽器中。

bower install clipboard --save

如果你不是在包管理,就下載一個(gè)ZIP文件clipboard.js。

設(shè)置

首先,從dist文件夾(用戶放置腳本的路徑)引入腳本或者從第三方加載CDN提供商。
用戶放置腳本的路徑：
jsDelivr：
RawGit：
從另一個(gè)元素剪切文本

另外,你可以定義一個(gè)data-clipboard-action屬性來(lái)指定如果你想復(fù)制或剪切內(nèi)容。
如果省略該屬性,默認(rèn)將使用復(fù)制。




    
        
        constructor-nodelist
        
    

    
        
        Mussum ipsum cacilds...

正如您可能期望的那樣,剪切操作只能在或< textarea >元素使用。

從屬性復(fù)制文本

事實(shí)上,你甚至不需要另一個(gè)元素復(fù)制其內(nèi)容。你可以在您的觸發(fā)元素里包含data-clipboard-text屬性。




    
        
        constructor-nodelist

事件

有些情況下,你想展示一些用戶反饋或捕獲被選中復(fù)制/剪切操作后的行為。
這就是為什么我們定制事件如成功和錯(cuò)誤讓你監(jiān)聽和執(zhí)行你的自定義邏輯。

constructor-nodelist

現(xiàn)場(chǎng)演示,只是需要打開控制臺(tái)。

高級(jí)用法

如果你不想修改HTML,有一個(gè)很方便的命令式API供您使用。所有您需要做的就是聲明一個(gè)函數(shù),做你的事,并返回一個(gè)值。
例如,如果你想要?jiǎng)討B(tài)設(shè)定了一個(gè)目標(biāo),你需要返回一個(gè)節(jié)點(diǎn)。(好像這里不支持界面跟控制臺(tái)同時(shí)出現(xiàn),所以操作看不到打印信息,可以完整復(fù)制下來(lái)直接運(yùn)行)




    
        
        constructor-nodelist

如果你想要?jiǎng)討B(tài)地設(shè)置一個(gè)文本,你需要返回一個(gè)字符串。(注意不能再目標(biāo)元素上加data-clipboard-target屬性,會(huì)報(bào)錯(cuò)的)
寫法有兩種:

直接返回固定字符串




    
        
        constructor-nodelist

藏在目標(biāo)元素屬性中獲取返回




    
        
        constructor-nodelist

還有,如果你正在使用單頁(yè)應(yīng)用程序,您可能想要更精確地管理的生命周期DOM。這是教你如何清理創(chuàng)建的事件和對(duì)象。

var clipboard = new Clipboard(".btn");
clipboard.destroy();

瀏覽器兼容性

這個(gè)庫(kù)依賴于Selection和execCommand APIs。前者兼容所有瀏覽器,后者兼容以下瀏覽器。

好消息是,如果你需要兼容老版本瀏覽器clipboard.js支持優(yōu)雅降級(jí)。你要做的就是當(dāng)執(zhí)行成功時(shí)回調(diào)函數(shù)彈出一個(gè)提示框說(shuō)復(fù)制!,按Ctrl + C時(shí)在失敗事件的回調(diào)函數(shù)提示因?yàn)槲谋疽呀?jīng)被選中。
您還可以通過(guò)運(yùn)行Clipboard.isSupported()查看clipboard.js是否支持,這樣你可以從UI隱藏復(fù)制/剪切按鈕。

下面是我說(shuō)的,這是全文中挺重要的一步,也是我敢直接使用在項(xiàng)目的原因,因?yàn)榇蠹叶贾啦寮蠖嘤兴约旱木窒扌愿嫒輪?wèn)題,為了折騰那些會(huì)耗費(fèi)很多的時(shí)間精力,更多時(shí)候因?yàn)樗絾?wèn)題根本無(wú)從下手,
有了一個(gè)方法支持我就讓它出現(xiàn),不支持就讓用戶自己復(fù)制,沒(méi)有什么善后工作了!