知識 分享 互助 懶人建站

    懶人建站專注于網頁素材下載,提供網站模板、網頁設計、ps素材、圖片素材等,服務于【個人站長】【網頁設計師】和【web開發從業者】的代碼素材與設計素材網站。

    懶人建站提供網頁素材下載、網站模板
    知識 分享 互助!

    js復制內容到剪貼板插件(clipboard.js)

    作者:佳明媽 來源:鄭州網站設計 2016-12-06 人氣:
    js復制內容到剪貼板插件clipboard.js,clipboard插件實現了js復制/剪切功能,瀏覽器兼容IE9以及IE9+和其他新版瀏覽器。clipboard.js體積也非常小巧,壓縮版11K,如果啟用GZIP的話只有3K大小

    js復制內容到剪貼板插件clipboard.js,clipboard插件實現了js復制/剪切功能,瀏覽器兼容IE9以及IE9+和其他新版瀏覽器。clipboard調用方法友好,實現方式多樣,亦可自定義文本獲取方案。

    clipboard.js體積也非常小巧,壓縮版11K,如果啟用GZIP的話只有3K大小

    clipboard.js的官方演示

    constructor-node
    constructor-nodelist
    constructor-selector
    function-target
    function-target
    function-target
    function-target
    function-target

    clipboard.js的DOM結構參考

    從另一個元素復制文本

    <input id="foo" value="https://github.com/zenorocha/clipboard.js.git">
    <button class="btn" data-clipboard-target="#foo"> COPY </button>
    

    把文本從另一個元素剪切走

    被剪切的目標文本會消失掉

    <textarea id="bar">Mussum ipsum cacilds...</textarea>
    <button class="btn" data-clipboard-action="cut" data-clipboard-target="#bar"> 把文本從另一個元素剪切走 </button>
    

    從dom節點的屬性復制文本

    <button class="btn" data-clipboard-text="Just because you can doesn't mean you should — clipboard.js"> 復制 </button>
    

    clipboard.js插件引用

    在頁面中引入js文件,注意你的js文件路徑

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

    實例化并且監聽success和失敗

    //懶人建站http://www.ezdqdj.live/
    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);
    });
    

    clipboard.js插件參數

    如果你不想修改HTML,那里是一個很方便的命令式API供您使用。所有您需要做的就是聲明一個函數,做你的事,并返回一個值。

    例如,如果你想要動態設定了一個目標,你需要返回一個節點。

    new Clipboard('.btn', {
        target: function(trigger) {
            return trigger.nextElementSibling;
        }
    });
    

    如果你想要動態地設置一個文本,你會返回一個字符串。

    new Clipboard('.btn', {
        text: function(trigger) {
            return trigger.getAttribute('aria-label');
        }
    });
    

    如果你正在與單頁應用程序,您可能想要管理的生命周期DOM更精確。這是你如何清理我們創建的事件和對象。

    var clipboard = new Clipboard('.btn');
    clipboard.destroy();
    

    clipboard.js瀏覽器支持情況

    clipboard.js瀏覽器支持情況
    ↓ 查看全文

    js復制內容到剪貼板插件(clipboard.js)由懶人建站收集整理,您可以自由傳播,請主動帶上本文鏈接

    懶人建站就是免費分享,覺得有用就多來支持一下,沒有能幫到您,懶人也只能表示遺憾,希望有一天能幫到您。

    js復制內容到剪貼板插件(clipboard.js)-最新評論

    老子是皇帝在线客服