首頁 >web前端 >js教程 >clipboard.js基本使用方法分享

clipboard.js基本使用方法分享

小云云原創: 2018-03-07 16:13:006391瀏覽

clipboard.js 是一個不需要flash，將文字複製到剪貼簿的插件。本文主要跟大家介紹clipboard.js基本使用方法，希望能幫助大家。

1 引入外掛程式

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

2基本上使用

首先需要您需要透過傳遞DOM選擇器，HTML元素或HTML元素清單來實例化它。

new Clipboard(&#39;.btn&#39;);

1用一個元素當觸發器來複製另一個元素的文字,data-clipboard-target屬性後面需要跟屬性選擇器

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

另外還有另外一個屬性data-clipboard-action屬性，以指定要不是copy還是要cut操作。預設是copy。 cut操作只適用於d5fd7aea971a85678ba271703566ebfd或4750256ae76b6b9d804861d8f69e79d3元素。

<!-- Target -->
<textarea id="bar">Mussum ipsum cacilds...</textarea>
<!-- Trigger -->
<button class="btn" data-clipboard-action="cut" data-clipboard-target="#bar">
    Cut to clipboard
</button>

2從屬性複製文本，不需要另一個元素當觸發器，可以使用data-clipboard-text屬性，在後面放上需要複製的文本.

<button class="btn" data-clipboard-text="Just because you can doesn&#39;t mean you should — clipboard.js">
    Copy to clipboard
</button>

3其他說明

1透過執行檢查clipboard.js是否支援Clipboard.isSupported()，傳回true則可以使用。
2顯示一些使用者回饋或捕捉在複製/剪切操作後選擇的內容。操作，文本，觸發元素

var clipboard = new Clipboard(&#39;.btn&#39;);
    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);
    });

3該插件使用的是事件委託的方式來觸發，所以大大減少了對dom的操作。

4進階使用

如果你不想修改你的HTML，那麼你可以使用一個非常方便的指令API。所有你需要做的是宣告一個函數，寫下你想要的動作，並傳回一個值。下面是一個對不同id的觸發器傳回不同的值的範例。具體的使用方法請看https://clipboardjs.com

<body>
    <input id="foo" value="https://github.com/zenorocha/clipboard.js.git">
    <!-- Trigger -->
    <button id=&#39;foo_1&#39; class="btn" data-clipboard-target="#foo">
    </button>
</body>
<script>
    new Clipboard(&#39;.btn&#39;, {
        text: function(trigger) {
            if(trigger.getAttribute(&#39;id&#39;)==&#39;foo_1&#39;){
                return 1;
            }else{
                return 2;
            }
        }
    });
</script>

clipboard.js基本使用方法分享

1 引入外掛程式

2基本上使用

3其他說明

4進階使用

相關文章