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>

成功展示

相关推荐
小徐_23332 小时前
2025 前端开源三年,npm 发包卡我半天
前端·npm·github
闲云一鹤13 小时前
【工具篇】使用 nvm 进行 node 版本管理
前端·npm·node.js
小白咚14 小时前
npm在文件下输入运行命令,授权限制问题window
前端·npm·node.js
Bigger1 天前
踩坑记:NPM 发布脚本导致组件重复发布
前端·ci/cd·npm
Misnearch3 天前
npm包-serve包使用
前端·npm·node.js
elangyipi1233 天前
从嵌套依赖到符号链接:4款主流npm包管理器的架构演进与深度对比
前端·架构·npm
elangyipi1233 天前
pnpm :下一代包管理工具的原理与实践
前端·npm
damo王3 天前
how to install npm in ubuntu24.04?
前端·npm·node.js
我有一棵树4 天前
淘宝 npm 镜像与 CDN 加速链路解析:不只是 Registry,更是分层静态加速架构
前端·架构·npm
I'm a little coder5 天前
Windows PowerShell 和cmd 中npm -v 报错
npm