clipboard.js的基础使用

最新推荐文章于 2024-07-22 19:37:58 发布

zyhzyh1120

最新推荐文章于 2024-07-22 19:37:58 发布

阅读量122

点赞数

分类专栏：第三方工具库文章标签：前端

本文链接：https://blog.youkuaiyun.com/zyhzyh1120/article/details/108693775

版权

第三方工具库专栏收录该内容

5 篇文章

订阅专栏

本文介绍如何使用clipboard.js实现网页上的复制功能。通过简单的HTML结构配合clipboard.js库，即可轻松为按钮添加复制内容到剪贴板的功能。文中还提供了实例代码，帮助读者快速上手。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

clipboard.js的基础使用

复制内容到裁剪板, copy内容 , 复制内容 ,裁剪内容插件

<!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 ClipboardJS('.btn');

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

    clipboard.on('error', function(e) {
        console.log(e);
    });
    </script>
</body>
</html>