最近在工作中有一个需求,就是需要使用一个按钮实现相应内容的复制。在网上找了很多解决方案,最后对比之下选择了clipboard.js插件来进行实现。因为它不依靠flash以及其他框架,而且体积小使用简单兼容性也好。下面简单介绍一下它的用法。
引入插件,可以下载,也可以使用第三方cdn。
<script src="/UploadFiles/2021-04-02/clipboard.min.js">对于HTML来说,我们有两种用法。
第一种
//html部分 <input type="text" id="copyValue" /> <button type="button" data-clipboard-target='#copyValue'>复制</button> //js部分 var clipboard = new Clipboard('button'); clipboard.on('success',function(e){ e.clearSelection(); alert('复制成功'); }); clipboard.on('error',function(e){ e.clearSelection(); alert('复制失败'); });说明:如果我们使用按钮复制的是另一个元素的内容,则我们可以使用这种方法。此时将按钮称为触发元素,被复制的元素称为目标元素。此时data-clipboard-target的值为目标元素的选择器,而data-clipboard-target的属性被设置在触发元素上。new Clipboard()为实例化对象,参数可以是HTML元素,元素选择器。有success和error两个事件可以供我们监听,实现自己的逻辑。因为复制完成后,目标元素会处于选中状态,所以我们需要e.clearSelection()取消目标元素的选中状态。
优点:复制的内容可以是动态的,目标元素的值发生变化,复制的值也发生变化。
适用场景:复制内容可变,不固定。
第二种
//html部分 <button type="button" data-clipboard-text='复制内容'>复制</button> //js部分 new Clipboard('button');说明:data-clipboard-text的值为你要复制的内容。无目标元素,只有触发元素。
缺点:复制的内容是静态的,不变的,提前设置好的。
适用场景:复制内容固定不变
对于以上缺点,我们可以优化如下,使之复制的内容也是动态的。
//html部分 <input type="text" id="copyValue" /> <button type="button" id="copy">复制</button> //js $('#copy').on('click', function () { var value = $('#copyValue').val(); $('#copy').attr('data-clipboard-text', value); var clipboard = new Clipboard('#copy'); clipboard.on('success', function (e) { alert('复制成功'); }); clipboard.on('error', function (e) { alert('复制失败'); }); })接着这里晒出最常用的几种方式,以供不时之需。
function-target
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>function-target</title> <meta name="viewport" content="width=device-width, initial-scale=1"> </head> <body> <!-- 1. Define some markup --> <button class="btn">Copy</button> <div>hello</div> <!-- 2. Include library --> <script src="/UploadFiles/2021-04-02/clipboard.min.js">function-text
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>function-text</title> <meta name="viewport" content="width=device-width, initial-scale=1"> </head> <body> <!-- 1. Define some markup --> <button class="btn">Copy</button> <!-- 2. Include library --> <script src="/UploadFiles/2021-04-02/clipboard.min.js">target-div
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>target-div</title> <meta name="viewport" content="width=device-width, initial-scale=1"> </head> <body> <!-- 1. Define some markup --> <span class="copy_content">hello 123</span> <button class="btn" data-clipboard-action="copy" data-clipboard-target=".copy_content">Copy</button> <!-- 2. Include library --> <script src="/UploadFiles/2021-04-02/clipboard.min.js">target-input
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>target-input</title> <meta name="viewport" content="width=device-width, initial-scale=1"> </head> <body> <!-- 1. Define some markup --> <input id="foo" type="text" value="hello"> <button class="btn" data-clipboard-action="copy" data-clipboard-target="#foo">Copy</button> <!-- 2. Include library --> <script src="/UploadFiles/2021-04-02/clipboard.min.js">target-textarea
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>target-textarea</title> <meta name="viewport" content="width=device-width, initial-scale=1"> </head> <body> <!-- 1. Define some markup --> <textarea id="bar">hello</textarea> <button class="btn" data-clipboard-action="cut" data-clipboard-target="#bar">Cut</button> <!-- 2. Include library --> <script src="/UploadFiles/2021-04-02/clipboard.min.js">以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
风云阁资源网 Design By www.bgabc.com广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!风云阁资源网 Design By www.bgabc.com暂无评论...
更新日志
2024年09月20日
2024年09月20日
- 王菲.2006《菲常好听》引进版[低速原抓WAV+CUE]
- 《三日危情独家的记忆》女角色介绍
- 《天国拯救》拉泰比武大会攻略
- 任天堂推出《马里奥惊奇》NS捆绑包 10月24日发售
- 《孤岛惊魂》能否逆转育碧颓势?曝系列新作正招兵买马
- 天命人呼叫战术轰炸!玩家自制《黑神话:悟空》轰炸机Mod
- 群星.1992-滚石九大天王·十二出好戏【滚石】【WAV+CUE】
- 群星.1994-新滚石九大天王之年度大丫滚石】【WAV+CUE】
- 坣娜.1998-别恋【非常喜】【WAV+CUE】
- 《草原经典 最炫草原风 2CD》[WAV/分轨][980MB]
- 《不烧不选 经典国语极品珍藏》[WAV/分轨][500MB]
- 《绝对主打 流行原创金曲 2CD》[WAV分轨][1.1GB]
- 《赛博朋克2077》更新上线:支持AMD FSR3
- 《塞尔达传说:智慧的再现》提前半个月偷跑,引发玩家担忧
- 战锤40K星际战士2全职业介绍|全职业技能效果一览