• <bdo id="wwck2"><u id="wwck2"></u></bdo>
  • <optgroup id="wwck2"></optgroup>
    <tt id="wwck2"></tt>
  • 記憶盒子

    把記憶裝進灰色的盒子,封裝起來,那年那月,重新拾起。

    首頁搜索目錄
    search
    當前主題: 互聯網絡

    ZeroClipboard過時了,js復制插件clipboard.js無需flash文件

    作者:Kaka    時間:2018-2-15 2:32:5    瀏覽:    評論:0

    說到js復制插件,大部分人用的應該是ZeroClipboard了,但是ZeroClipboard插件有一個弊端,就是必須要用到一個flash文件,這無論是在插件的加載效率還是使用體驗上,都是不夠完美的。那么有沒有一個不用flash文件的js復制插件呢?答案是有的,那就是本文要介紹的clipboard.js

    查看演示

    實例代碼

    target-input.html

    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <title>target-input</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    </head>
    <body>
    <input id="foo" type="text" value="hello">
    <button class="btn" data-clipboard-action="copy" data-clipboard-target="#foo">Copy</button>

    <script src="../dist/clipboard.min.js"></script>

    <script>
    var clipboard = new Clipboard('.btn');
    </script>
    </body>
    </html>

    代碼解釋及使用方法:

    先下載clipboard.js文件,放到網站某一個目錄下。點擊下載

    使用時html代碼要先引用clipboard.js文件,注意路徑要寫對,引用寫法是:

    <script src="../dist/clipboard.min.js"></script>

    在后面要實例化Clipboard,寫法是:

    <script>
    var clipboard = new Clipboard('.btn');
    </script>

    復制input輸入框里的文字的寫法:

    <input id="foo" type="text" value="hello">
    <button class="btn" data-clipboard-action="copy" data-clipboard-target="#foo">Copy</button>

    這里有三個地方要寫對:

    1)input的id要與button的data-clipboard-target的值一致,這個例子是foo

    2)button的class的值要與后面實例化Clipboard的寫法new Clipboard('');一致,這個例子是btn

    3)button的data-clipboard-action的值是copy

    clipboard.js豐富強大的復制功能

    clipboard.js具有豐富強大的復制功能,除了上面介紹的復制input輸入框里的文字之外,還可復制textarea里的文字,可復制某一個div里的文字。此外,還可以通過event事件返回任何文本復制到剪貼板里,也可以通過event事件復制任何標簽(比如div)里的文字。

    所有這些復制功能都能在本文的演示頁面里找到。

    查看演示

    演示文件下載

    標簽: ZeroClipboard  clipboard.js  

    加入本站QQ群(312716741),交流分享網站建設、優化、SEO技術。。。

     

    • 擴展閱讀
    上一篇: 判斷網站有無使用百度云加速的兩個方法
    下一篇: svg實現的世界地圖輪廓【附源代碼】

    發表評論:

    ◎歡迎參與討論,請在這里發表您的看法、交流您的觀點。

    訂閱博客                   QQ交流群(312716741)

    • 通過Google訂閱本站 通過鮮果訂閱本站 通過抓蝦訂閱本站
    • 通過QQ郵箱訂閱本站 通過Yahoo訂閱本站 通過有道訂閱本站

    Search

    最新評論及回復

    最近留言

    網站分類

    Powered By Z-Blog 1.8 Walle Build 91204 Designed by Han'space

    Copyright @2009-2019 All Rights Reserved. 粵ICP備14028160號-1

    Powered By Z-Blog 1.8 Walle Build 91204
    Copyright @2009-2019 All Rights Reserved.
    微拍福利