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/