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>

成功展示

相关推荐
暂时先用这个名字2 天前
安装deepseek harness及插件
人工智能·ai·npm·pnpm·deepseek·深度求索·harness
Lyra_Infra4 天前
OpenClaw 升级及 Channel 安装故障排查与遗留问题分析
后端·npm
紫禁玄科6 天前
Shai-Hulud:npm生态的自我复制蠕虫风暴
前端·npm·node.js
fastjson_8 天前
Hadoop之Yarn
大数据·hadoop·npm
晓得迷路了8 天前
栗子前端技术周刊第 141 期 - Next.js 16.3、npm 安全事件、2026 CSS 现状调查报告结果...
前端·javascript·npm
周小董8 天前
[1367]npm 安装 canvas 报错 node-gyp ERR
前端·npm·node.js
MartinYeung510 天前
npm爆发大规模供应链攻击 蠕虫污染 2000+ 个包版本: 深度技术剖析
前端·npm·node.js
无责任此方_修行中13 天前
换个版本号就能升级?可没那简单:pnpm 11 升级踩坑记
javascript·后端·npm
leslie11815 天前
npm常用命令
前端·npm
不在逃避q17 天前
Trae/Vs Code/Cursor命令行无法跑npm命令
前端·arcgis·npm