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>

成功展示

相关推荐
weixin_4617694016 小时前
npm create vue@latest 错误
前端·vue.js·npm
MadeInSQL3 天前
npm : 无法加载文件 C:\Program Files\nodejs\npm.ps1,因为在此系统上禁止运行脚
npm
cypking3 天前
npm 依赖包版本扫描提示插件Version Lens
前端·npm·node.js
SP八岐大兔5 天前
NPM管理OpenClaw安装、卸载及运维命令
运维·前端·npm·openclaw
陈佬昔没带相机5 天前
GitHub clone 不动、pip 卡住、brew 转圈?一份指南搞定
git·npm
奔跑的呱呱牛6 天前
xlsx 已停止维护且存在漏洞!推荐一个可直接替代的 npm 库
前端·npm·node.js·xlsx·sheetjs
Ztopcloud极拓云视角7 天前
Claude Code 源码泄露事件技术复盘:npm sourcemap 配置失误的完整分析
前端·npm·node.js
赖念安7 天前
在 vscode 的 NPM SCRIPTS 面板点击执行后脚本失败
ide·vscode·npm
Moshow郑锴7 天前
npm国内镜像加速之使用 nrm 工具(灵活切换,适合多环境)
前端·npm·node.js