clipboard.js小说明

github主页

clipboard.js是一个github上的开源项目，可以实现纯 JavaScript （无 Flash）的浏览器内容复制到系统剪贴板的功能。

用法

                <script type="text/javascript" src="script/clipboard.min.js"<script>  
             

第一种：

         
          <div id="btn" data-clipboard-text="1">
          <div id="btn" data-clipboard-text="2">
          <span>Copy</span>
          </div>


          //js脚本
          <script>
    var btn = document.getElementById('btn');
    var clipboard = new Clipboard(btn);

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

    clipboard.on('error', function(e) {
        console.log(e);
    });
 </script>
             

第二种：

     <button class="btn">Copy</button>
     <div>hello</div>

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

第三种：

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

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

       clipboard.on('success', function(e) {
          console.log(e);
       });
     
       clipboard.on('error', function(e) {
          console.log(e);
       });
       </script>
            

第四种：

     <textarea id="bar">hello</textarea>

    <button class="btn" data-clipboard-action="cut" data-clipboard-target="#bar">Cut</button>
    
    <script>
    var clipboard = new Clipboard('.btn');
    
    clipboard.on('success', function(e) {
        console.log(e);
    });
    
    clipboard.on('error', function(e) {
        console.log(e);
    });
    </script>

第五种：

    <button class="btn">Copy</button>
    
    <script>
    var clipboard = new Clipboard('.btn', {
        text: function() {
            return 'to be or not to be';
        }
    });

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

    clipboard.on('error', function(e) {
        console.log(e);
    });
    </script>