回到顶部

「 初音未来：歌姬计划 Mega39's+\游戏档案馆 」2023-06-07 「 戴拿&盖亚奥特曼\皮套摄影 」2024-08-02 「 宝可梦：白金\游戏档案馆 」2023-08-06 「 闪焰王牌/模玩摄影 」2024-08-06 「 多龙巴鲁托\模玩摄影 」2023-06-05 「 泽塔奥特曼\皮套摄影 」2023-06-07 「 阿尔宙斯\模玩摄影 」2023-06-07

clipboard.js实现复制功能 #90

Anuluca Date : 2021-01-12 Tags : 2

使用 clipboard.js 可以在 js 原生的基础上很简单就能实现点击复制功能,且支持包括IE9的所有主流浏览器，在这里记录一下我的使用过程。

官网：

clipboardjs.com

1.安装

1	$ npm install lipboard --save

2.引入 CDN

引入下面任意一个即可。

<!-- 常规引入 -->
<script src="dist/clipboard.min.js"></script>

<!-- CDN引入 -->
<!-- jsDelivr -->
<script src="https://cdn.jsdelivr.net/npm/clipboard@2.0.6/dist/clipboard.min.js"></script>
<!-- cdnjs -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/2.0.6/clipboard.min.js"></script>
<!-- RawGit (Deprecated - Use is not recommended) -->
<script src="https://cdn.rawgit.com/zenorocha/clipboard.js/v2.0.6/dist/clipboard.min.js"></script>
<!-- GitHack (Based on RawGit) -->
<script src="https://rawcdn.githack.com/zenorocha/clipboard.js/v2.0.6/dist/clipboard.min.js"></script>
<!-- unpkg -->
<script src="https://unpkg.com/clipboard@2/dist/clipboard.min.js"></script>
<!-- Statically -->
<script src="https://cdn.statically.io/gh/zenorocha/clipboard.js/v2.0.6/dist/clipboard.min.js"></script>

3.初始化复制功能

<script>
  //clipboard初始化
  let clipboard = new ClipboardJS(".btn");
  clipboard.on("success", function (e) {
    alert("复制成功！");
  });
  clipboard.on("error", function (e) {
    alert("插件加载错误");
  });
</script>

到此为止，已经可以在任意地方实现复制功能了。

4.一般用法（左侧文本，右侧按钮）

<!-- Target -->
<input id="foo" value="文本value" />

<!-- Trigger -->
<button class="btn" data-clipboard-target="#foo">Copy</button>

5.剪切（仅适用于input和textarea标签）

<!-- Target -->
<textarea id="bar">豫章故郡，洪都新府。星...</textarea>

<!-- Trigger -->
<button class="btn" data-clipboard-action="cut" data-clipboard-target="#bar">
    Cut to clipboard
</button>

6.点击按钮复制元素内data-clipboard-text属性值

1
2
3

<button class="btn" data-clipboard-text="我是按钮内data-clipboard-text属性值">
    Copy to clipboard
</button>

由于某些原因，博客图床于5月26日惨遭爆破，目前正在整理需要的图片并迁移存活的图片到新图床,预计6月10日重新上线网站

THE END

讨论

Anuluca

Update:2021-01-12

JS web前端

...

推特 ( 𝕏 )

Bilibili

微博

Github

裏

表

笔记

Javascript/CSS

Vue/React

其它

杂物室

杂谈

工具

影像