在网页上优雅的粘贴复制clipboard.js
yuyutoo 2024-10-13 00:35 1 浏览 0 评论
官网：https://clipboardjs.com/
介绍
clipboard.js是一款不依赖flash或任何重量级框架的粘贴复制插件，并且它没有任何非常复杂的配置，这也是它存在的原因。
安装
- 通过npm安装（或者直接下载js文件引入）
npm install clipboard --save
2.引入js
<script src="dist/clipboard.min.js"></script>
//官网提供了下载地址，也可以使用免费的cdn
使用
示例
<!DOCTYPE html>
<html class="no-js">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title></title>
<meta name="description" content="" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link
href="https://cdn.bootcss.com/twitter-bootstrap/3.4.1/css/bootstrap.min.css"
rel="stylesheet"
/>
</head>
<body>
<div class="input-group" style="width: 600px;margin:200px">
<input
type="text"
class="form-control"
id="foo"
value="https://github.com/zenorocha/clipboard.js.git"
placeholder="Amount"
/>
<div class="btn input-group-addon" data-clipboard-target="#foo">复制</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/clipboard@2/dist/clipboard.min.js"></script>
<script>
new ClipboardJS(".btn");
</script>
</body>
</html>
如图书最简单的例子，单机复制按钮即可自动复制文本框的内容
换成下面就会变成剪切，主要是以下属性
data-clipboard-action="cut"
<div class="input-group" style="width: 600px;margin:200px">
<input
type="text"
class="form-control"
id="foo"
value="https://github.com/zenorocha/clipboard.js.git"
placeholder="Amount"
/>
<div class="btn input-group-addon" data-clipboard-target="#foo" data-clipboard-action="cut">剪切</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/clipboard@2/dist/clipboard.min.js"></script>
<script>
new ClipboardJS(".btn");
</script>
剪切操作仅适用于<input>或<textarea>元素
或者这样，直接复制 data-clipboard-text属性的内容
<button class="btn" data-clipboard-text="要复制的内容"> 复制 </button>
事件监听，可以打开控制台自行尝试
var 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();
});
clipboard.on('error', function(e) {
console.error('Action:', e.action);
console.error('Trigger:', e.trigger);
});
高级用法
- 动态绑定
new ClipboardJS('.btn', {
target: function(trigger) {
return trigger.nextElementSibling;
}
});
- 动态赋值
new ClipboardJS('.btn', {
text: function(trigger) {
return trigger.getAttribute('aria-label');
}
});
- 要在Bootstrap Modals中使用或与任何其他更改焦点的库一起使用，您需要将focus元素设置为container值
new ClipboardJS('.btn', {
container: document.getElementById('modal')
});
- 更好的管理单页面的DOM生命周期
var clipboard = new ClipboardJS('.btn');
clipboard.destroy();
兼容性
备注
如果需要支持更低版本的浏览器，可以参考官网的介绍，它能够优雅的降级
提供Chrome和Firefox的扩展
一个浏览器扩展，为GitHub，MDN，Gist，StackOverflow，StackExchange，npm甚至Medium中的每个代码块添加“复制到剪贴板”按钮。需要的可以私信或者前往扩展中心自行下载。
相关推荐
- 《亲爱的》特效真厉害，一块绿布贯彻全集，不得不佩服李现的演技
-
说起《亲爱的热爱的》这部电视剧，相信很多人并不陌生，这部电视剧让男演员李现因此爆红，其实李现是一个非常有潜力的男演员，他的表现也非常的精彩。但是大家都知道，在每一部电视剧中都有特效的存在，这部电视剧也...
- 充分运用AI特效，京剧电影《大唐贵妃》正式开机
-
“当唱到‘在天愿为比翼鸟，在地愿为连理枝’的时候，会从演员身后飞起一只巨大无比的比翼鸟，鸟在空中盘旋，刮起的风甚至会吹过角色的脸……”11月10日，电影《大唐贵妃》在上海车墩影视基地正式开机，这是第一...
- 工业光魔:没有PS的年代，特效怎么做?
-
大家好，我是戴着眼镜拿着话筒的阿拉斯加，片片。昨天，我给大家简单介绍了传奇特效公司——工业光魔的起源。...
- 价值13亿的“爽片”上映，每一帧都是钱砸出来的特效，却无缘国内
-
在七月二号的时候；美国在网络上面上映了一部大制作的“爽片”《明日之战》。...
- 影视特效是怎么制作出来的?来，一起体验吧!
-
电影是人们生活中不可缺少的一部分，是视觉与听觉相结合的现代艺术。悲剧、喜剧、亲情、友情、爱情都是它所能展现的内容。影视艺术有哪些独有的特征？什么是蒙太奇？全息影片又是什么意思？最近，少儿频道的一档节目...
- ps五分钟学会自己制作“特效”
-
嗨，欢迎观看本期的摄影后期教学。那就是教大家一个特别炫酷，特别实用的ps“特效”光！有同学会问，“啊，特效光是不是特别难，我一点ps都不会！”咳咳不要着急，karry的教学都是针对ps零基础的同学的，...
- 抖音这个特效太扎心，无数网友看着看着就哭了……
-
2078年的你，会是什么样子？最近，抖音上一款特效火了。它可以让你看到自己从现在到2078年的容貌变化，你可以一点点看着皱纹爬上眼角，白发布满双鬓。看着看着，很多网友就哭了。有人说，一辈子很长却也很短...
- 《爱情公寓》的特效有多好?这集花了300万，网友看不出来特效
-
对于有些电视剧来说，特效那可是相当重要的一个部分了。尤其是对那些科幻片和一些玄幻类的电视剧就更加了。一部剧或者是影片特效的好坏，直接就影响了这个作品的质量。首先就让我们来看一下电视剧孤芳不自赏吧！里面...
- 窗花剪纸、鸭头滤镜、潜艇王者…… 揭秘抖音特效那些事儿
-
更多往期「Byte漫来了」系列漫画，可点击阅读：...
- 原来影视剧中的“光头”全是这样弄的 观众被骗了许多年
-
不管是电影还是电视剧，都会有光头因为是剧情的需要，那么她们的光头会是怎么弄的呢？一直都以为那些演员都是要真的剃光头，看到这些照片后，才知道深深的被骗了许多年。在影视中，常常看到演员有光头的戏，她在外出...
- 这些特效给几分?春晚舞台显示技术盘点
-
[中关村在线投影机频道原创]从1983年开始，春晚成为国人大年三十晚上最期待的一场精神盛宴。直播式节目播出方式，各类表演大师云集舞台，相声小品歌舞欢聚一堂，这是很多家庭一年中最欢乐的时刻，而春晚，则是...
- 11 款六元秒杀特效对比，哪个赢了不知道，貂蝉一眼输了
-
已经上线了11款六元秒杀皮肤，其中部分是升级后的“伴生皮”，也就是英雄的首款皮肤，首周六元之后恢复原价488点券。无论是何种形式的六元皮肤，不得不说他们的质量都非常好，这11款皮肤的特效对...
- 《半条命2 RTX》上架Steam 光追特效+4K效果
-
《半条命2RTX》现已在Steam平台正式上架，这款屡获殊荣的游戏以其沉浸式的故事、惊险的战斗和令人费解的物理特性吸引了全球数百万玩家，游戏现已经新增全面光追、物理纹理以及增强的多边形效果进行了彻底...
- 微信又有新玩法?多种好看特效可选择，赶快安排上
-
今日分享：手机特效适用系统：安卓今天小雷又发现了一个好玩的东西，就是手机加上特效也太好看了吧！早上上班的时候发现同事打开微信后，微信页面居然下起了樱花雨。看了同事的微信页面小雷我真的觉得太好玩太好看了...
- 判若两人!揭秘好莱坞的特效化妆过程
-
好莱坞的特效化妆牛到什么程度呢？可以把美人化妆成丑八怪，把黑人化妆成白人，把年轻人化妆成老人，把女人化妆成男人，把男人化妆成女人，把普通人化妆成怪物、外星人甚至异鬼……来见识一下这些神奇化妆术的“变...
欢迎 你 发表评论:
- 一周热门
- 最近发表
- 标签列表
-
- mybatis plus (70)
- scheduledtask (71)
- css滚动条 (60)
- java学生成绩管理系统 (59)
- 结构体数组 (69)
- databasemetadata (64)
- javastatic (68)
- jsp实用教程 (53)
- fontawesome (57)
- widget开发 (57)
- vb net教程 (62)
- hibernate 教程 (63)
- case语句 (57)
- svn连接 (74)
- directoryindex (69)
- session timeout (58)
- textbox换行 (67)
- extension_dir (64)
- linearlayout (58)
- vba高级教程 (75)
- iframe用法 (58)
- sqlparameter (59)
- trim函数 (59)
- flex布局 (63)
- contextloaderlistener (56)