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>

成功展示

相关推荐
i建模19 小时前
在 Ubuntu 中为 npm 切换国内镜像源
linux·ubuntu·npm
每天瞎忙的农民工19 小时前
Ubuntu 24 安装npm22
linux·运维·ubuntu·npm
孪生质数-2 天前
Windows安装OpenClaw(Clawdbot)教程
ai·npm·skill·minimax·clawdbot·openclaw
cuber膜拜2 天前
Marp CLI快速入门
pdf·npm·markdown·ppt·marp
咖啡の猫2 天前
微信小程序使用 npm 包
微信小程序·小程序·npm
天若有情6733 天前
XiangJsonCraft v1.2.0重大更新解读:本地配置优先+全量容错,JSON解耦开发体验再升级
前端·javascript·npm·json·xiangjsoncraft
有个人神神叨叨3 天前
pnpm cnpm npm 对比
前端·arcgis·npm
有个人神神叨叨3 天前
node、npm 和 npx 的关系
前端·arcgis·npm
虹科网络安全4 天前
艾体宝新闻 | NPM 生态系统陷入困境:自我传播恶意软件在大规模供应链攻击中感染了 187 个软件包
前端·npm·node.js
摇滚侠4 天前
PNPM 包管理工具和 NPM 包管理工具
vscode·npm·node.js·pnpm