<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> input{ } </style> </head> <body> <!--使用很简单--> <!--第一步：引入js库 <script src="../dist/clipboard.min.js"></script>--> <!--第二步：定义标签（一般是触发复制的按钮）<button class="btn">Copy</button>--> <!--第三步：实例化clipboard，调用构造函数var clipboard = new Clipboard('.btn');--> <!--第一种 从变量赋值内容到剪贴板--> <div>hello</div> <button class="btn" >Copy</button> <!--第二种 在button里定义属性data-clipboard-target和data-clipboard-action--> <button class="btn" data-clipboard-action="copy" data-clipboard-target="div">Copy</button> <!--input和textarea用法类似--> <input id="foo" type="text" value="hello"> <button class="btn" data-clipboard-action="copy" data-clipboard-target="#foo">Copy</button> <textarea id="bar">hello</textarea> <button class="btn" data-clipboard-action="cut" data-clipboard-target="#bar">Cut</button> <script src="lib/clipboard.min.js"></script> <script> // 第一种方法构造函数里定义target 从变量赋值内容到剪贴板 var clipboard = new Clipboard('.btn', { // 要复制的目标对象 target: function() { return document.querySelector('div'); }, // 复制的内容 text: function() { return '你好啊'; } }); //最重要的一点clipboard还定义了复制成功/失败的回调函数，方便我们去处理后面的逻辑 clipboard.on('success', function(e) { alert("复制成功") }); clipboard.on('error', function(e) { alert("复制失败") }); </script> </body> </html>
复制案例
猜你喜欢
转载自blog.csdn.net/amyloverice/article/details/80018154
今日推荐
周排行