兼容手机PC,点击即可复制文本内容到剪切板插件clipboard.js

ゞ浴缸里的玫瑰 2021-09-26 21:58 382阅读 0赞

开源项目  
[https://github.com/zenorocha/clipboard.js][https_github.com_zenorocha_clipboard.js].  
(拷贝文本到剪切板不应该复杂，它不应该需要许多步骤以及几百KB的文件，另外，它不应该依靠flash以及其他框架，这就是clipboard存在的原因)

使用clipboard简单快捷，并且从官网下载下来的zip格式压缩包里有非常实用的demo,举一个简单的例子：

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>target-div</title>
    </head>
    <body>
        
        <div>hello</div>
        <button class="btn" data-clipboard-action="copy" data-clipboard-target="div">Copy</button>
    
        
        <script src="../dist/clipboard.min.js"></script>
    
        
        <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>
    非常简单吧，我们只需下面四步：
    
    1.引入clipboard.min.js文件
    
    2.选择一个可以确定被拷贝元素的选择器，本例中使用用的是基本的标签选择器<div>，当然也可以使用id选择器 class选择器等等
    
    3.定义一个button按钮，注意按钮的属性：
    
    　　data-clipboard-action="copy" data-clipboard-target="div"
    　　其中data-clipboard-target属性就是第二步你定义的选择器
    
    4.书写js,建立clipboard对象以及复制后执行的方法
    
     
    
    OK,这样功能就完成了，点击按钮后就会发现div的内容已经拷贝到剪切板了。

![请打赏谢谢大佬][70]

[https_github.com_zenorocha_clipboard.js]: https://github.com/zenorocha/clipboard.js
[70]: /images/20210923/fd24c0bbd26340d9b3bd949f52991189.png