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>

成功展示

相关推荐
TT_Close7 小时前
看懂 VSCode 发布中心后,下一步该把 App 发版交给 CLI 了
npm·开源·app
前端之虎陈随易2 天前
有生之年系列,Nodejs进程管理pm2 v7.0发布
前端·typescript·npm·node.js
网络点点滴4 天前
NPM的包版本管理
前端·npm·node.js
Allen正心正念20254 天前
前端——Node.js&npm,学点前端的东西
前端·npm·node.js
带娃的IT创业者5 天前
Bitwarden CLI 供应链攻击深度分析:当密码管理工具本身成为安全威胁
安全·npm·安全漏洞·cli·供应链攻击·bitwarden
拾贰_C5 天前
【node.js | Ubuntu | update】如何升级旧的nodejs本版至最新;如何升级npm
ubuntu·npm·node.js
网络点点滴6 天前
NPM 和 package.json 文件简介
前端·npm·json
青木9606 天前
前后端开发调试运行技巧
linux·服务器·前端·后端·npm·uv
Rabbit_QL6 天前
npm 不是“前端的包管理器“—它是 Node.js 的
前端·npm·node.js
草履虫君6 天前
原电脑只运行了:npm install -g openclaw 要把它迁移到一个新电脑,怎么操作,菜鸟教程
经验分享·ai·npm