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>

成功展示

相关推荐
scorpion_V1 天前
VScode 中执行 npm 报错的问题
ide·vscode·npm
FreeBuf_1 天前
攻击者利用Discord Webhook通过npm、PyPI和Ruby软件包构建隐蔽C2通道
前端·npm·ruby
程序铺子2 天前
如何使用 npm 安装 sqlite3 和 canvas 这些包
javascript·npm·node.js
gc_22993 天前
Ape.Volo项目启动前端项目时报错“digital envelope routines::unsupported”
npm
SHUIPING_YANG4 天前
完美迁移:将 nvm 和 npm 完全安装到 Windows D 盘
前端·windows·npm
问道飞鱼4 天前
【前端知识】npm依赖升级以及冲突解决
前端·arcgis·npm·升级·冲突解决
美酒没故事°5 天前
npm源管理器:nrm
前端·npm·npm源
三十_A5 天前
【实录】使用 patch-package 修复第三方 npm 包中的 Bug
前端·npm·bug
孟陬5 天前
一个专业的前端如何在国内安装 `bun`
npm·github·bun
子兮曰6 天前
npm workspace 深度解析:与 pnpm workspace 和 Lerna 的全面对比
前端·javascript·npm