clipboard.js 使用教程

常樱沙Vigour

于 2024-08-08 07:07:56 发布

阅读量358

点赞数 3

本文链接：https://blog.csdn.net/gitblog_00814/article/details/141006970

版权

clipboard.js 使用教程

clipboard.js:scissors: Modern copy to clipboard. No Flash. Just 3kb gzipped :clipboard:项目地址:https://gitcode.com/gh_mirrors/cl/clipboard.js

项目介绍

clipboard.js 是一个轻量级的 JavaScript 库，用于实现网页中的复制和剪切功能。它不依赖于 Flash 或其他第三方框架，体积小巧，易于使用，是前端开发中处理复制粘贴操作的优秀选择。

项目快速启动

以下是如何快速在你的项目中使用 clipboard.js 的步骤：

安装

你可以通过 npm 安装 clipboard.js：

npm install clipboard --save

或者直接下载文件并在你的项目中引用：

<script src="https://www.itxst.com/package/clipboardjs/clipboard.min.js"></script>

使用示例

以下是一个简单的使用示例：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>clipboard.js 示例</title>
    <script src="https://www.itxst.com/package/clipboardjs/clipboard.min.js"></script>
</head>
<body style="padding:10px">
    <input id="foo" value="https://www.itxst.com"/>
    <button class="btn" id="btn" data-clipboard-target="#foo">复制</button>

    <script>
        var clipboard = new ClipboardJS('#btn');
        clipboard.on('success', function(e) {
            console.log('复制成功');
        });
        clipboard.on('error', function(e) {
            console.log('复制失败');
        });
    </script>
</body>
</html>