js实现各种复制功能
引用:
<script src="https://clipboardjs.com//dist/clipboard.min.js"></script>
示例1:
提示:点击Copy按钮,把“hello”复制到剪贴板。
html代码:

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>target-input</title> <meta name="viewport" content="width=device-width, initial-scale=1"> </head> <body> <!-- 1. Define some markup --> <input id="foo" type="text" value="hello"> <button class="btn" data-clipboard-action="copy" data-clipboard-target="#foo">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); }); </script> </body> </html>
示例2:
提示:点击Cut按钮,把“hello”剪切到剪贴板。
html代码:

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>target-textarea</title> <meta name="viewport" content="width=device-width, initial-scale=1"> </head> <body> <!-- 1. Define some markup --> <textarea id="bar">hello</textarea> <button class="btn" data-clipboard-action="cut" data-clipboard-target="#bar">Cut</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); }); </script> </body> </html>
示例3:
hello
提示:点击Copy按钮,把“hello”复制到剪贴板。
html代码:

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>target-div</title> <meta name="viewport" content="width=device-width, initial-scale=1"> </head> <body> <!-- 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); }); </script> </body> </html>
示例4:
提示:点击Copy按钮,把“to be or not to be”复制到剪贴板。
html代码:

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>function-text</title> <meta name="viewport" content="width=device-width, initial-scale=1"> </head> <body> <!-- 1. Define some markup --> <button class="btn">Copy</button> <!-- 2. Include library --> <script src="../dist/clipboard.min.js"></script> <!-- 3. Instantiate clipboard --> <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> </body> </html>
示例5:
提示:点击Copy按钮,把“hello”复制到剪贴板。
html代码:

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>function-target</title> <meta name="viewport" content="width=device-width, initial-scale=1"> </head> <body> <!-- 1. Define some markup --> <button class="btn">Copy</button> <div>hello</div> <!-- 2. Include library --> <script src="../dist/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); }); </script> </body> </html>
示例6:
提示:
点击第一个Copy按钮,把“1”复制到剪贴板。
点击第二个Copy按钮,把“2”复制到剪贴板。
点击第三个Copy按钮,把“3”复制到剪贴板。
html代码:

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>constructor-selector</title> <meta name="viewport" content="width=device-width, initial-scale=1"> </head> <body> <!-- 1. Define some markup --> <button class="btn" data-clipboard-text="1">Copy</button> <button class="btn" data-clipboard-text="2">Copy</button> <button class="btn" data-clipboard-text="3">Copy</button> <!-- 2. Include library --> <script src="../dist/clipboard.min.js"></script> <!-- 3. Instantiate clipboard by passing a string selector --> <script> var clipboard = new Clipboard('.btn'); clipboard.on('success', function(e) { console.log(e); }); clipboard.on('error', function(e) { console.log(e); }); </script> </body> </html>
示例7:
提示:
点击第一个Copy按钮,把“1”复制到剪贴板。
点击第二个Copy按钮,把“2”复制到剪贴板。
点击第三个Copy按钮,把“3”复制到剪贴板。
html代码:

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>constructor-nodelist</title> <meta name="viewport" content="width=device-width, initial-scale=1"> </head> <body> <!-- 1. Define some markup --> <button data-clipboard-text="1">Copy</button> <button data-clipboard-text="2">Copy</button> <button data-clipboard-text="3">Copy</button> <!-- 2. Include library --> <script src="../dist/clipboard.min.js"></script> <!-- 3. Instantiate clipboard by passing a list of HTML elements --> <script> var btns = document.querySelectorAll('button'); var clipboard = new Clipboard(btns); clipboard.on('success', function(e) { console.log(e); }); clipboard.on('error', function(e) { console.log(e); }); </script> </body> </html>
示例8:
Copy
提示:点击Copy,把“1”复制到剪贴板。
html代码:

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>constructor-node</title> <meta name="viewport" content="width=device-width, initial-scale=1"> </head> <body> <!-- 1. Define some markup --> <div id="btn" data-clipboard-text="1"> <span>Copy</span> </div> <!-- 2. Include library --> <script src="../dist/clipboard.min.js"></script> <!-- 3. Instantiate clipboard by passing a HTML element --> <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> </body> </html>
官方Demo:http://www.webkaka.com/Blog/ARCHIVES/demo/clipboard.js-master/demo/
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 一个奇形怪状的面试题:Bean中的CHM要不要加volatile?
· [.NET]调用本地 Deepseek 模型
· 一个费力不讨好的项目,让我损失了近一半的绩效!
· .NET Core 托管堆内存泄露/CPU异常的常见思路
· PostgreSQL 和 SQL Server 在统计信息维护中的关键差异
· CSnakes vs Python.NET:高效嵌入与灵活互通的跨语言方案对比
· DeepSeek “源神”启动!「GitHub 热点速览」
· 我与微信审核的“相爱相杀”看个人小程序副业
· Plotly.NET 一个为 .NET 打造的强大开源交互式图表库
· 上周热点回顾(2.17-2.23)