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

資訊專欄INFORMATION COLUMN

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

itvincent / 2553人閱讀

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

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

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

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

安裝

你可以在npm。

npm install clipboard --save

或者瀏覽器中。

bower install clipboard --save

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

設(shè)置

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

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




    
        
        constructor-nodelist

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

從屬性復(fù)制文本

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




    
        
        constructor-nodelist
事件

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




    
        
        constructor-nodelist

現(xiàn)場演示,只是需要打開控制臺。

高級用法

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




    
        
        constructor-nodelist

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

直接返回固定字符串 



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



    
        
        constructor-nodelist

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

var clipboard = new Clipboard(".btn");
clipboard.destroy();
瀏覽器兼容性

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


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

下面是我說的,這是全文中挺重要的一步,也是我敢直接使用在項目的原因,因為大家都知道插件大多有它自己的局限性跟兼容問題,為了折騰那些會耗費很多的時間精力,更多時候因為水平問題根本無從下手,
有了一個方法支持我就讓它出現(xiàn),不支持就讓用戶自己復(fù)制,沒有什么善后工作了!

Clipboard.isSupported()

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

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

相關(guān)文章

  • 如何使用異步剪切板 AsyncClipboard API

    摘要：同步方法交互剪切板的阻塞有限的訪問權(quán)限跨瀏覽器體驗不一致對多種數(shù)據(jù)類型的支持有限等問題解決起來也是麻煩。這里有篇文章講述到底該如何用操作剪切板 showImg(https://segmentfault.com/img/remote/1460000018714576?w=5000&h=3333); ?? 更多前端技術(shù)和知識點，搜索訂閱號 JS 菌 訂閱 長時間我們一直在使用 docume...

    CocoaChina 評論0 收藏0

  • HeyUI組件庫按需加載功能上線，盤點HeyUI組件庫有哪些獨特功能？

    摘要：測試復(fù)制至剪切板的文本測試相關(guān)文檔復(fù)制剪切板滾動至視圖內(nèi)其實，這是一個非常方便的功能，比如說，分頁加載后滾動至頭部，切換頁面時切換至頭部。HeyUI組件庫 如果你還不了解heyui組件庫，歡迎來我們的官網(wǎng)或者github參觀。 官網(wǎng) github 當(dāng)然，如果能給我們一顆???，那是最贊的了！ 按需加載 當(dāng)heyui組件庫的組件越來越多的時候，按需加載的功能終于上線了。 話不多說，先把按需...

    IamDLY 評論0 收藏0

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

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

    keithyau 評論0 收藏0

  • H5剪切板功能

    摘要：復(fù)制內(nèi)容到剪貼板插件官網(wǎng)地址引用方式默認(rèn)是截取中的的屬性值截取輸入框中的值里面還有很多高級用法可以前往官網(wǎng)邏輯更多細(xì)節(jié)官網(wǎng)框架提供的剪切板插件 ???? 最近使用Vue開發(fā)Line(日韓的一款類似中國微信平臺)的內(nèi)嵌H5.里面的有一個需求就是將當(dāng)前鏈接粘貼，然后發(fā)送到pc端，在電腦上進(jìn)行打開。所有搜集找到了一下幾種情況： 1.不帶input輸入框的原生js方法 這種情況適用于復(fù)制非...

    Developer 評論0 收藏0

發(fā)表評論

0條評論

itvincent

男|高級講師

TA的文章

閱讀更多
最新活動
閱讀需要支付1元查看
<