clipboard

clipboard

现代复制到剪贴板。无闪光。只有 3kb 的 gzip 压缩。

安装

bash 复制代码
npm install clipboard --save

第三方cdn提供商

html 复制代码
<script src="https://cdn.jsdelivr.net/npm/clipboard@2.0.11/dist/clipboard.min.js"></script>

使用

js 复制代码
data-clipboard-target="#foo" //从其他元素复制文本

data-clipboard-action="cut" // 从其他元素剪切或者复制文本 copy, cut只适用于 input textarea标签

代码展示

html 复制代码
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <button style="background-color: red;" class="btn" data-clipboard-target="#foo" data-clipboard-action="copy">
        你是最棒的实施肯222定会觉得可能</button>

    <button id="foo">我是小胖哦</button>

    <script src="https://cdn.jsdelivr.net/npm/clipboard@2.0.11/dist/clipboard.min.js"></script>
    <script>
        let btn = document.querySelector('.btn');

        btn.addEventListener('click', function () {

            let 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();
            });
        });
    </script>
</body>

</html>

成功展示

相关推荐
AlfredZhao5 天前
npm 源切换:一条命令搞定
npm
@tangguo1236 天前
npm 和 yarn 配置说明
前端·javascript·npm·node.js·yarn
钝挫力PROGRAMER10 天前
npx 与 npm 全局安装/更新/卸载
npm·npx·mcp·dsh
天若有情67312 天前
开源轻量双语工具|一键批量查询 NPM 包历史下载量,支持按作者批量统计
javascript·npm·github pages·开源工具·netlify·前端开源·npm克隆量
柚稚姐姐16 天前
npm install pnpm -g npm error code EACCES npm error syscall symlink
前端·npm·node.js
晴天1617 天前
npm install -f(--force)深度解析:作用原理、报错根源与风险避坑指南
前端·npm·node.js
晴天1617 天前
.npmrc 配置文件全解析:从换源到工程化的完整指南
npm·npmrc
晴天1618 天前
peerDependencies 全面解析:前端依赖生态的核心机制与实战指南
前端·npm
晴天1621 天前
打造自己的 npm 包实战指南
前端·npm·node.js
西西小飞龙21 天前
npm vs pnpm
前端·npm·node.js