js 實現頁面的複製功能 clipboard.js

今天來說一個插件，我們在做頁面時可能會有這樣的需求，點擊一個按鈕然後將一段文字複製到剪切版。這是我們就用到了clipboard.js

一、引入clipboard.js

1.下載：http://download.csdn.net/detail/webxiaoma/9876114
2.最新版本官網下載：http://clipboardshare.codeplex.com/

二、使用方法

1. js方法：

    <!-- 1. Define some markup -->
    <button class="btn">Copy</button>
    <div>hello</div>

    <!-- 2. Include library -->
    <script src="clipboard.min.js"></script>

    <!-- 3. Instantiate clipboard -->
    <script>
    var clipboard = new Clipboard('.btn', {
        target: function() {
            return document.querySelector('div');
        }
    });

    clipboard.on('success', function(e) {
        console.log(e);
    });

    clipboard.on('error', function(e) {
        console.log(e);
    });

1. data 屬性方法：

<!-- 1. Define some markup -->
    <div>hello</div>
    <button class="btn" data-clipboard-action="copy" data-clipboard-target="div">Copy</button>

    <!-- 2. Include library -->
    <script src="../dist/clipboard.min.js"></script>

    <!-- 3. Instantiate clipboard -->
    <script>
    var clipboard = new Clipboard('.btn');

    clipboard.on('success', function(e) {
        console.log(e);
    });

    clipboard.on('error', function(e) {
        console.log(e);
    });