clipboard.js无需Flash无需依赖任何JS库实现文本复制与剪切

站长资源 2024/11/28 佚名

2 0 1

我们在网页上放置一个复制按钮，主要用来方便用户复制链接之类的复杂文本，以往的做法是，通过JS依靠Flash，甚至借助jQuery庞大的js库来实现文本复制到剪贴板的。今天我要给大家介绍的是一款极现代的，不需要flash，不依赖任何其他js库的非常小的插件，它叫clipboard.js。

运行效果图：

HTML
首先加载本地clipboard.js文件。

<script src="/UploadFiles/2021-04-02/clipboard.min.js">

然后就是在body中加上要复制或剪切的文本域内容以及按钮。




<input id="foo" value="https://www.jb51.net/article/73145.htm"> 
<button class="btn" data-clipboard-target="#foo" aria-label="复制成功！">复制</button> 



这里，我们使用了HTML5的data-属性，用来定位复制对象目标，它指向了文本域#foo，说明复制的是#foo中的value内容，aria-label属性定义了复制成功后的信息，用来提示复制结果信息。

还有个属性data-clipboard-action，它定义当前操作是复制还是剪切，默认是复制，当data-clipboard-action="cut"，这时，点击按钮将会剪切文本，跟WORD操作一样。当然，剪切操作仅适用于text和textarea。

我们也可以不需要input和textarea等元素内容作为复制对象，我们可以将要复制的内容通过ata-clipboard-text属性定义在按钮上，点击按钮就可以复制到ata-clipboard-text对应的内容。




<button class="btn" data-clipboard-text="这里是要复制的内容" aria-label="复制成功！">复制</button> 



Javascript

将以下一句代码加入到</body>前的<script>里，保存打开浏览，点击按钮即可复制。




new Clipboard('.btn'); 



当然我们可以再进一步处理，比如当复制完成后，提示复制成功信息更友好些，只要执行以下代码即可：




var clipboard = new Clipboard('.btn'); 
 
clipboard.on('success', function(e) { 
 var msg = e.trigger.getAttribute('aria-label'); 
 alert(msg); 
 
 e.clearSelection(); 
}); 


以上就是，不需要flash，不依赖任何其他js库实现文本复制与剪切实现过程，希望对大家的学习有所帮助。

js复制到剪切板,js复制内容到剪切板,js剪切图片

广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！

评论“clipboard.js无需Flash无需依赖任何JS库实现文本复制与剪切”

暂无评论...

P70系列延期，华为新旗舰将在下月发布

3月20日消息，近期博主@数码闲聊站透露，原定三月份发布的华为新旗舰P70系列延期发布，预计4月份上市。

而博主@定焦数码爆料，华为的P70系列在定位上已经超过了Mate60，成为了重要的旗舰系列之一。它肩负着重返影像领域顶尖的使命。那么这次P70会带来哪些令人惊艳的创新呢？
根据目前爆料的消息来看，华为P70系列将推出三个版本，其中P70和P70 Pro采用了三角形的摄像头模组设计，而P70 Art则采用了与上一代P60 Art相似的不规则形状设计。这样的外观是否好看见仁见智，但辨识度绝对拉满。

更新日志

2024年11月28日

clipboard.js无需Flash无需依赖任何JS库实现文本复制与剪切

jqTransform美化表单

页面内容排序插件jSort使用方法

评论“clipboard.js无需Flash无需依赖任何JS库实现文本复制与剪切”

P70系列延期，华为新旗舰将在下月发布

更新日志

友情链接