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>

成功展示

相关推荐
兮动人12 小时前
Linux 安装 Claude Code 实战:Node.js、npm、GLM 配置一次跑通
linux·npm·node.js·cc·claude code
lastHertz10 天前
openskill 实战指南:像管理 npm 包一样管理你的 AI Skill
前端·人工智能·npm
qq_5896660511 天前
npm install npm install -g @vue/cli 分别是什么意思以及安装路径
前端·vue.js·npm
Dreamboat-L12 天前
NVM的安装与使用(保姆级教程)
npm·node.js
无责任此方_修行中13 天前
踩坑实录:为什么 `pnpm run` 会偷偷帮你装依赖?—— 浅析 pnpm 与 npm run 的底层差异
javascript·后端·npm
ShiXZ21315 天前
指令集-NPM 常用指令速查手册
前端·npm·node.js
是烨笙啊15 天前
从 npm 与 Bun 的选择看 AI 时代的“最佳实践”焦虑
前端·人工智能·npm
小杍随笔15 天前
【 .npmrc 终极配置指南:统一管理 npm/pnpm 缓存与全局目录,告别磁盘混乱】
前端·缓存·npm
ppshuX16 天前
npm-cli-造轮子初体验
npm