clipboard—不依賴flash的文本複製插件

時間 2019-11-06

原文原文鏈接

clipboard.js是一款輕量級的實現複製文本到剪貼板功能的JavaScript插件。經過該插件能夠將輸入框，文本域，DIV元素中的文本等文本內容複製到剪貼板中html

官方地址：https://clipboardjs.com/
Github地址：https://github.com/zenorocha/clipboard.js/git

適用方法

1.引入js文件github

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

2.基本使用瀏覽器

首先須要您須要經過傳遞DOM選擇器，HTML元素或HTML元素列表來實例化它。dom

new Clipboard('.btn');

用一個元素當觸發器來複制另外一個元素的文本,data-clipboard-target屬性後須要跟屬性選擇器函數

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

另外還有另一個屬性data-clipboard-action屬性，以指定是要要麼copy仍是要cut操做。默認狀況下是copy。cut操做只適用於<input>或<textarea>元素。插件

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

從屬性中複製文本，不須要另外一個元素當觸發器，能夠使用data-clipboard-text屬性，在後面放上須要複製的文本code

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

3.其餘說明htm

經過運行檢查clipboard.js是否支持Clipboard.isSupported()，返回true則能夠使用。
顯示一些用戶反饋或捕獲在複製/剪切操做後選擇的內容。操做，文本，觸發元素事件

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);
});

該插件使用的是事件委託的方式來觸發，因此大大減小了對dom的操做。

4.高級使用

若是你不想修改你的HTML，那麼你能夠使用一個很是方便的命令API。全部你須要作的是聲明一個函數，寫下你想要的操做，並返回一個值。下面是一個對不一樣id的觸發器返回不一樣的值的例子

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

5.支持的瀏覽器

Chrome 42+,Edge 12+,Firefox 41+,IE 9+,Opera 29+,Safari 10+