摘要:是一款輕量級的實現復制文本到剪貼板功能的插件。通過該插件可以將輸入框,文本域,元素中的文本等文本內容復制到剪貼板中官方地址地址適用方法引入文件基本使用首先需要您需要通過傳遞選擇器,元素或元素列表來實例化它。
clipboard.js是一款輕量級的實現復制文本到剪貼板功能的JavaScript插件。通過該插件可以將輸入框,文本域,DIV元素中的文本等文本內容復制到剪貼板中
官方地址:https://clipboardjs.com/
Github地址:https://github.com/zenorocha/clipboard.js/
1.引入js文件
2.基本使用
首先需要您需要通過傳遞DOM選擇器,HTML元素或HTML元素列表來實例化它。
new Clipboard(".btn");
用一個元素當觸發(fā)器來復制另一個元素的文本,data-clipboard-target屬性后需要跟屬性選擇器
另外還有另外一個屬性data-clipboard-action屬性,以指定是要要么copy還是要cut操作。默認情況下是copy。cut操作只適用于或元素。
從屬性中復制文本,不需要另一個元素當觸發(fā)器,可以使用data-clipboard-text屬性,在后面放上需要復制的文本
3.其他說明
通過運行檢查clipboard.js是否支持Clipboard.isSupported(),返回true則可以使用。
顯示一些用戶反饋或捕獲在復制/剪切操作后選擇的內容。操作,文本,觸發(fā)元素
var clipboard = new Clipboard(".btn"); clipboard.on("success", function(e) { console.info("Action:", e.action); console.info("Text:", e.text); console.info("Trigger:", e.trigger); e.clearSelection(); }); clipboard.on("error", function(e) { console.error("Action:", e.action); console.error("Trigger:", e.trigger); });
該插件使用的是事件委托的方式來觸發(fā),所以大大減少了對dom的操作。
4.高級使用
如果你不想修改你的HTML,那么你可以使用一個非常方便的命令API。所有你需要做的是聲明一個函數,寫下你想要的操作,并返回一個值。下面是一個對不同id的觸發(fā)器返回不同的值的例子
5.支持的瀏覽器
Chrome 42+,Edge 12+,Firefox 41+,IE 9+,Opera 29+,Safari 10+
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規(guī)行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/96072.html
摘要:為什么復制文本到剪貼板應該不難。在內部我們需要獲取所有匹配的元素選擇器并且為它們每一個添加上事件偵聽器。因為這個原因我們使用事件代理通過一個偵聽器取代了多個事件監(jiān)聽器。從另一個元素復制文本常見的用例是復制另一個元素的內容。 工作中需要使用到的一個復制插件,使用簡單兼容性還行,因為沒找到中文版介紹就自己翻譯一下,水平有限,不一定全按文章走,如果有問題歡迎指正!!為了更加直觀的展示用法,略...
摘要:發(fā)布了一個專門用于從頁面向本地計算機的剪貼板復制文本的庫。用庫來實現這一功能,問題是這個庫是用一個不可見的來完成剪貼操作,而技術正被各大瀏覽器廠商冷落,所以勢必要有一個新的方案。 showImg(https://segmentfault.com/img/bVso8J); Zeno Rocha發(fā)布了一個專門用于從web頁面向本地計算機的剪貼板復制文本的JavaScript庫:Clipb...
摘要:最近公司需要做一個實現復制的功能,本來以為會是很簡單兩三行代碼的事,后來發(fā)現網上說的那些原生實現復制的方法很多瀏覽器因為安全的原因都不支持了,嘗試了很長時間,還是死心了,決定使用第三方的庫。 最近公司需要做一個js實現復制的功能,本來以為會是很簡單兩三行js代碼的事,后來發(fā)現網上說的那些原生js實現復制的方法很多瀏覽器因為安全的原因都不支持了,嘗試了很長時間,還是死心了,決定使用第三方...
摘要:需求開發(fā)過程中遇到的需求需要復制請求過來的一段密令類似支付寶淘寶口令到剪切板。網上搜了下,是個相對比較靠譜的第三方。感謝大佬的評論意見使用該方法,會在下次更新循環(huán)結束之后執(zhí)行延遲回調。在修改數據之后立即使用這個方法,獲取更新后的。 需求 開發(fā)過程中遇到的需求需要復制 請求過來的一段密令(類似支付寶淘寶口令)到剪切板。 pc端的文本復制到剪切板 如果是在pc端的話,可以直接使用原生js進...
摘要:需求開發(fā)過程中遇到的需求需要復制請求過來的一段密令類似支付寶淘寶口令到剪切板。網上搜了下,是個相對比較靠譜的第三方。感謝大佬的評論意見使用該方法,會在下次更新循環(huán)結束之后執(zhí)行延遲回調。在修改數據之后立即使用這個方法,獲取更新后的。 需求 開發(fā)過程中遇到的需求需要復制 請求過來的一段密令(類似支付寶淘寶口令)到剪切板。 pc端的文本復制到剪切板 如果是在pc端的話,可以直接使用原生js進...
閱讀 1965·2023-04-25 15:45
閱讀 1197·2021-09-29 09:34
閱讀 2498·2021-09-03 10:30
閱讀 2000·2019-08-30 15:56
閱讀 1456·2019-08-29 15:31
閱讀 1268·2019-08-29 15:29
閱讀 3196·2019-08-29 11:24
閱讀 3048·2019-08-26 13:45