js实现各种复制功能
引用:
<script src="https://clipboardjs.com//dist/clipboard.min.js"></script>
示例1:
提示:点击Copy按钮,把“hello”复制到剪贴板。
html代码:
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<!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代码:
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<!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代码:
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<!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代码:
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<!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:
hello
提示:点击Copy按钮,把“hello”复制到剪贴板。
html代码:
View Code
View Code
View Code
View Code
提示:点击Copy按钮,把“hello”复制到剪贴板。
html代码:
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<!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代码:
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<!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代码:
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<!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代码:
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<!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/