Js复制剪切-兼容所有浏览器

xiaoxiao2021-02-27  329

传统的使用JS复制粘贴,例如,独立的js库Zero Clipboard简单实现复制到剪贴板功能,这种依赖于flash的复制粘贴功能,不同浏览器会有版本不兼容的问题,现在我推荐clipboard.js,完美兼容所有浏览器,而且很方便使用。

官方文档及下载地址:> https://clipboardjs.com/

用法简介:

<!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> <!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>

具体可见官方文档,很简单,很实用。

转载请注明原文地址: https://www.6miu.com/read-3396.html

最新回复(0)