html5页面实现点击复制功能的插件clipboard.js

最新推荐文章于 2024-07-09 16:46:58 发布

weixin_43343144

最新推荐文章于 2024-07-09 16:46:58 发布

阅读量466

点赞数

分类专栏： html

本文链接：https://blog.csdn.net/weixin_43343144/article/details/102596852

版权

html 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

参考：http://www.clipboardjs.cn/

参考：https://codeload.github.com/zenorocha/clipboard.js/zip/master

<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <title>clipboard示例</title>
    <script src="clipboard.js"></script>
    <script src="jquery-3.4.1.min.js"></script>
</head>
<body>

<!-- Target -->
<input id="foo" value="https://github.com/zenorocha/clipboard.js.git">


<!-- Trigger -->
<button class="btn" data-clipboard-target="#foo">
    点击一下复制
</button>

<!-- Trigger -->
<button class="btn" data-clipboard-text="Just because you can doesn't mean you should — clipboard.js">
    Copy to clipboard
</button>

</body>
<script>

    $(() => {
        var clipboard = new ClipboardJS('.btn');

        clipboard.on('success', function(e) {
            console.info('Action:', e.action);
            console.info('Text:', e.text);
            console.info('Trigger:', e.trigger);

            e.clearSelection();
        });

        clipboard.on('error', function(e) {
            console.error('Action:', e.action);
            console.error('Trigger:', e.trigger);
        });
    });
    

</script>
</html>

weixin_43343144

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
html5页面实现点击复制功能的插件clipboard.js

参考：http://www.clipboardjs.cn/参考：https://codeload.github.com/zenorocha/clipboard.js/zip/master<!DOCTYPE html><head> <meta charset="UTF-8"> <title>clipboard示例...
复制链接

扫一扫

专栏目录