成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專(zhuān)欄INFORMATION COLUMN

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

Astrian / 939人閱讀

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

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

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

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

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ù)制頁(yè)面中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用法類(lèi)似

最重要的一點(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)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/88329.html

相關(guān)文章

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

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

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

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

    摘要：前面我在自動(dòng)化控制版微信該系列文中更新了控制微信發(fā)送圖片的方法。根據(jù)部分群友實(shí)際工作的需要，本文將分享如何控制微信發(fā)送文件。接下來(lái)我將破解這個(gè)領(lǐng)域的世界未解之謎，彌補(bǔ)無(wú)人完成這個(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è)指令。一份用來(lái)顯示的。順帶說(shuō)一下，復(fù)制粘貼復(fù)制粘貼老模塊中是用的倉(cāng)庫(kù)。 近日，重構(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è)添加上事件偵聽(tīng)器。因?yàn)檫@個(gè)原因我們使用事件代理通過(guò)一個(gè)偵聽(tīng)器取代了多個(gè)事件監(jiān)聽(tīng)器。從另一個(gè)元素復(fù)制文本常見(jiàn)的用例是復(fù)制另一個(gè)元素的內(nèi)容。 工作中需要使用到的一個(gè)復(fù)制插件，使用簡(jiǎn)單兼容性還行，因?yàn)闆](méi)找到中文版介紹就自己翻譯一下，水平有限，不一定全按文章走，如果有問(wèn)題歡迎指正??！為了更加直觀的展示用法,略...

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

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

0條評(píng)論

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