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>

成功展示

相关推荐
李游Leo12 小时前
npm / yarn / pnpm 包管理器对比与最佳实践(含国内镜像源配置与缓存优化)
前端·缓存·npm
ssshooter1 天前
你知道怎么用 pnpm 临时给某个库打补丁吗?
前端·面试·npm
亮子AI1 天前
【npm】npm 包更新工具 npm-check-updates (ncu)
前端·npm·node.js
子兮曰1 天前
🚀别再乱写package.json了!这些隐藏技巧让项目管理效率提升300%
前端·javascript·npm
木辰風1 天前
idea npm install 很慢(nodejs)
前端·npm·node.js
橙程橙2 天前
npm是什么?优缺点又是什么?
npm
wyzqhhhh2 天前
组件库打包工具选型(npm/pnpm/yarn)的区别和技术考量
前端·npm·node.js
csdn_aspnet2 天前
使用nvm管理node多版本(安装、卸载nvm,配置环境变量,更换npm淘宝镜像)
npm·node.js
王蛋1112 天前
前端工作问题或知识记录
前端·npm·node.js
朝阳392 天前
vue3图标终极方案【npm包推荐】vue3-icon-sui(含源码详解)
npm·vue3·图标组件