JS引入clipboard.js,實現復制功能

 

1. 引入js文件

 

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

　　

2. 綁定

            (1)data-clipboard-action屬性

                默認值是copy,也就是復制功能,也可以為cut(剪切)

            (2)data-clipboard-target屬性

                要復制的目標值

                

 
<input id="foo" value="https://github.com/zenorocha/clipboard.js.git">
 
 
<button class="btn" data-clipboard-target="#foo"> <img src="assets/clippy.svg" alt="Copy to clipboard"> </button>

　　

 

 

            (3)data-clipboard-text屬性

                不需要其他元素就能從目標屬性復制的內容

<button class="btn" data-clipboard-text="111122222"> Copy to clipboard </button>

　　

 

3. 事件(成功和失敗事件)

var clipboard = new ClipboardJS('.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); 
});

 

 

 

 

 

 

官方網站: http://www.clipboardjs.cn/