国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

使用clipboard實(shí)現(xiàn)前端頁面復(fù)制到粘貼板的功能

Astrian / 930人閱讀

摘要：最近公司需要做一個(gè)實(shí)現(xiàn)復(fù)制的功能，本來以為會(huì)是很簡單兩三行代碼的事，后來發(fā)現(xiàn)網(wǎng)上說的那些原生實(shí)現(xiàn)復(fù)制的方法很多瀏覽器因?yàn)榘踩脑蚨疾恢С至耍瑖L試了很長時(shí)間，還是死心了，決定使用第三方的庫。

最近公司需要做一個(gè)js實(shí)現(xiàn)復(fù)制的功能，本來以為會(huì)是很簡單兩三行js代碼的事，后來發(fā)現(xiàn)網(wǎng)上說的那些原生js實(shí)現(xiàn)復(fù)制的方法很多瀏覽器因?yàn)榘踩脑蚨疾恢С至耍瑖L試了很長時(shí)間，還是死心了，決定使用第三方的js庫。
最先看了利用flash技術(shù)的ZeroClipboard，體積龐大不好用放棄了。
最終選擇了不依賴flash輕量級(jí)js庫clipBoard，官網(wǎng)地址https://clipboardjs.com/

使用很簡單
第一步：引入js庫
第二步：定義標(biāo)簽（一般是觸發(fā)復(fù)制的按鈕）
第三步：實(shí)例化clipboard，調(diào)用構(gòu)造函數(shù)var clipboard = new Clipboard(".btn");

結(jié)合官方給的demo看一下幾種場景

1.從變量賦值內(nèi)容到剪貼板 
var clipboard = new Clipboard(".btn", {
        text: function() {
            return "to be or not to be";
        }
    });

點(diǎn)擊button，"to be or not to be"會(huì)粘貼到剪貼板

2.復(fù)制頁面中div/input/textarea的內(nèi)容

第一種方法構(gòu)造函數(shù)里定義target

hello

var clipboard = new Clipboard(".btn", {
        target: function() {
            return document.querySelector("div");
        }
    });

點(diǎn)擊button，"hello"會(huì)粘貼到剪貼板

還有第二種方法在button里定義屬性data-clipboard-target和data-clipboard-action

hello


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

同樣的，點(diǎn)擊button，"hello"會(huì)粘貼到剪貼板

input和textarea用法類似

最重要的一點(diǎn)clipboard還定義了復(fù)制成功/失敗的回調(diào)函數(shù)，方便我們?nèi)ヌ幚砗竺娴倪壿?/p> 

clipboard.on("success", function(e) {
        console.log(e);
    });

clipboard.on("error", function(e) {
        console.log(e);
    });

完。

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/88329.html

相關(guān)文章

  • H5復(fù)制粘貼雙端適配的解決方案（終極版）

    摘要：前言最終適配所有機(jī)型的方案基于官網(wǎng)這個(gè)庫由幾個(gè)不同的提供商托管。提供的復(fù)制失敗的方法，進(jìn)行復(fù)制失敗提示復(fù)制失敗請手動(dòng)選擇復(fù)制。上其他相關(guān)分享使用實(shí)現(xiàn)前端頁面復(fù)制到粘貼板的功能中配合實(shí)現(xiàn)點(diǎn)擊按鈕復(fù)制內(nèi)容到剪切板 前言 最終適配所有機(jī)型的方案基于clipboardjs官網(wǎng)https://clipboardjs.com/ 這個(gè)庫由幾個(gè)不同的CDN提供商托管。選擇你最喜歡的：） 建議使用 v...

    keithyau 評(píng)論0 收藏0

  • 成功破解Python領(lǐng)域的世界未解之謎后，輕松完成UI自動(dòng)化控制微信發(fā)送文件

    摘要：前面我在自動(dòng)化控制版微信該系列文中更新了控制微信發(fā)送圖片的方法。根據(jù)部分群友實(shí)際工作的需要，本文將分享如何控制微信發(fā)送文件。接下來我將破解這個(gè)領(lǐng)域的世界未解之謎，彌補(bǔ)無人完成這個(gè)功能的缺陷。 ...

    jayce 評(píng)論0 收藏0

  • vue 2.x項(xiàng)目 vue-qriously 生成二維碼并下載、cliploard復(fù)制粘貼

    摘要：近日，重構(gòu)項(xiàng)目某一老模塊時(shí)，有一個(gè)功能是生成二維碼并下載，還可以復(fù)制鏈接。先想著新模塊中是否有生成二維碼的插件，看了下。項(xiàng)目中封裝了一個(gè)指令。一份用來顯示的。順帶說一下，復(fù)制粘貼復(fù)制粘貼老模塊中是用的倉庫。 近日，重構(gòu)項(xiàng)目某一老模塊時(shí)，有一個(gè)功能是生成二維碼并下載，還可以復(fù)制鏈接。列表每項(xiàng)都有二維碼、下載二維碼和復(fù)制鏈接和列表上方總的二維碼。老模塊是用的qrocode中文文檔，qrco...

    littlelightss 評(píng)論0 收藏0

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

    摘要：為什么復(fù)制文本到剪貼板應(yīng)該不難。在內(nèi)部我們需要獲取所有匹配的元素選擇器并且為它們每一個(gè)添加上事件偵聽器。因?yàn)檫@個(gè)原因我們使用事件代理通過一個(gè)偵聽器取代了多個(gè)事件監(jiān)聽器。從另一個(gè)元素復(fù)制文本常見的用例是復(fù)制另一個(gè)元素的內(nèi)容。 工作中需要使用到的一個(gè)復(fù)制插件，使用簡單兼容性還行，因?yàn)闆]找到中文版介紹就自己翻譯一下，水平有限，不一定全按文章走，如果有問題歡迎指正！！為了更加直觀的展示用法,略...

    itvincent 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<