qinyi素材网
当前位置: 首页 > WEB教程 > 强大的复制粘贴clipboard插件

强大的复制粘贴clipboard插件

  时间: 2021-10-29   阅读:1.64k
简要教程

使用clipboard插件将文本复制到剪贴板,只需要引入简单的一行代码和初始化插件就能完成。在HTML中引入clipboard.min.js,之后在JavaScript中初始化插件:var clipboard = new ClipboardJS(‘.btn’);

使用方法

在HTML中引入clipboard.js

<script src="https://cdn.jsdelivr.net/npm/clipboard@2.0.8/dist/clipboard.min.js"></script>

HTML代码

    <button type="button" class="copy btn btn-secondary" data-toggle="tooltip" data-placement="top" data-clipboard-target="#foo">
        Copy
    </button>
    <input class="form-control" id="foo" value="to be or not to be">

JavaScript代码

    var clipboard = new ClipboardJS('.btn');

    clipboard.on('success', function (e) {
        console.log(e);
    });

    clipboard.on('error', function (e) {
        console.log(e);
    });

点击Copy按钮之后,input的value就会拷贝到剪贴板中。

clipboard插件的github网址为https://github.com/zenorocha/clipboard.js

上一篇: 下一篇: