資訊專欄INFORMATION COLUMN
摘要：為什么復制文本到剪貼板應該不難。在內部我們需要獲取所有匹配的元素選擇器并且為它們每一個添加上事件偵聽器。因為這個原因我們使用事件代理通過一個偵聽器取代了多個事件監(jiān)聽器。從另一個元素復制文本常見的用例是復制另一個元素的內容。
工作中需要使用到的一個復制插件，使用簡單兼容性還行，因為沒找到中文版介紹就自己翻譯一下，水平有限，不一定全按文章走，如果有問題歡迎指正?。?br>為了更加直觀的展示用法,略微修改下代碼讓你們可以每個代碼都直接看到效果,引用第三方地址可以放心拉到本地運行.
原文地址https://clipboardjs.com/
clipboard.js能夠用現(xiàn)代的方法來將文本復制到剪貼板上，不依賴Flash，不依賴框架，并且衹有3kb大小。
為什么？
復制文本到剪貼板應該不難。它不需要許多步驟來配置或加載數(shù)百KBs大小文件。但最重要的是,它不應該依賴Flash或任何臃腫的框架。
這就是為什么clipboard.js的存在。
你可以在npm。
npm install clipboard --save
或者瀏覽器中。
bower install clipboard --save
如果你不是在包管理,就下載一個ZIP文件clipboard.js。
設置首先,從dist文件夾(用戶放置腳本的路徑)引入腳本或者從第三方加載CDN提供商。
用戶放置腳本的路徑：
jsDelivr：
cdnjs：
RawGit：
現(xiàn)在,您只需要通過DOM選擇器,HTML元素,或HTML元素的列表去實例化它。
new Clipboard(".btn");
在內部,我們需要獲取所有匹配的元素選擇器并且為它們每一個添加上事件偵聽器。但你猜怎么著?如果你有成百上千個匹配元素選擇器,這個操作會消耗大量的內存。
因為這個原因我們使用事件代理通過一個偵聽器取代了多個事件監(jiān)聽器。畢竟,#完美。
我們生活一個說明性的復興(原文We"re living a declarative renaissance，我沒搞懂這句話。。),這就是為什么我們決定利用 HTML5 data attributes去獲得更好的可用性。
從另一個元素復制文本常見的用例是復制另一個元素的內容。你可以通過在觸發(fā)元素里添加一個data-clipboard-target屬性使用。
它的值被包含在另一個將會被匹配到的元素選擇器的屬性上。
constructor-nodelist
從另一個元素剪切文本
另外,你可以定義一個data-clipboard-action屬性來指定如果你想復制或剪切內容。
如果省略該屬性,默認將使用復制。
constructor-nodelist
正如您可能期望的那樣,剪切操作只能在或< textarea >元素使用。
從屬性復制文本事實上,你甚至不需要另一個元素復制其內容。你可以在您的觸發(fā)元素里包含data-clipboard-text屬性。
constructor-nodelist
事件
有些情況下,你想展示一些用戶反饋或捕獲被選中復制/剪切操作后的行為。
這就是為什么我們定制事件如成功和錯誤讓你監(jiān)聽和執(zhí)行你的自定義邏輯。
constructor-nodelist
現(xiàn)場演示,只是需要打開控制臺。
高級用法如果你不想修改HTML,有一個很方便的命令式API供您使用。所有您需要做的就是聲明一個函數(shù),做你的事,并返回一個值。
例如,如果你想要動態(tài)設定了一個目標,你需要返回一個節(jié)點。(好像這里不支持界面跟控制臺同時出現(xiàn),所以操作看不到打印信息,可以完整復制下來直接運行)
constructor-nodelist
如果你想要動態(tài)地設置一個文本,你需要返回一個字符串。(注意不能再目標元素上加data-clipboard-target屬性,會報錯的)
寫法有兩種:
constructor-nodelist
藏在目標元素屬性中獲取返回
constructor-nodelist
還有,如果你正在使用單頁應用程序,您可能想要更精確地管理的生命周期DOM。這是教你如何清理創(chuàng)建的事件和對象。
var clipboard = new Clipboard(".btn");
clipboard.destroy();
瀏覽器兼容性
這個庫依賴于Selection和execCommand APIs。前者兼容所有瀏覽器,后者兼容以下瀏覽器。
好消息是,如果你需要兼容老版本瀏覽器clipboard.js支持優(yōu)雅降級。你要做的就是當執(zhí)行成功時回調函數(shù)彈出一個提示框說復制!,按Ctrl + C時在失敗事件的回調函數(shù)提示因為文本已經被選中。
您還可以通過運行Clipboard.isSupported()查看clipboard.js是否支持,這樣你可以從UI隱藏復制/剪切按鈕。
下面是我說的,這是全文中挺重要的一步,也是我敢直接使用在項目的原因,因為大家都知道插件大多有它自己的局限性跟兼容問題,為了折騰那些會耗費很多的時間精力,更多時候因為水平問題根本無從下手,
有了一個方法支持我就讓它出現(xiàn),不支持就讓用戶自己復制,沒有什么善后工作了!
Clipboard.isSupported()
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉載請注明本文地址：http://m.hztianpu.com/yun/106255.html
摘要：同步方法交互剪切板的阻塞有限的訪問權限跨瀏覽器體驗不一致對多種數(shù)據類型的支持有限等問題解決起來也是麻煩。這里有篇文章講述到底該如何用操作剪切板 showImg(https://segmentfault.com/img/remote/1460000018714576?w=5000&h=3333); ?? 更多前端技術和知識點，搜索訂閱號 JS 菌 訂閱 長時間我們一直在使用 docume...
摘要：測試復制至剪切板的文本測試相關文檔復制剪切板滾動至視圖內其實，這是一個非常方便的功能，比如說，分頁加載后滾動至頭部，切換頁面時切換至頭部。HeyUI組件庫 如果你還不了解heyui組件庫，歡迎來我們的官網或者github參觀。 官網 github 當然，如果能給我們一顆???，那是最贊的了！ 按需加載 當heyui組件庫的組件越來越多的時候，按需加載的功能終于上線了。 話不多說，先把按需...
摘要：前言最終適配所有機型的方案基于官網這個庫由幾個不同的提供商托管。提供的復制失敗的方法，進行復制失敗提示復制失敗請手動選擇復制。上其他相關分享使用實現(xiàn)前端頁面復制到粘貼板的功能中配合實現(xiàn)點擊按鈕復制內容到剪切板 前言 最終適配所有機型的方案基于clipboardjs官網https://clipboardjs.com/ 這個庫由幾個不同的CDN提供商托管。選擇你最喜歡的：） 建議使用 v...
閱讀 1022·2021-11-17 09:33
閱讀 499·2019-08-30 11:16
閱讀 2594·2019-08-29 16:05
閱讀 3439·2019-08-29 15:28
閱讀 1478·2019-08-29 11:29
閱讀 2024·2019-08-26 13:51
閱讀 3483·2019-08-26 11:55
閱讀 1293·2019-08-26 11:31
