扫一扫浏览

【原创】js实现复制到剪贴板,兼容所有浏览器,支持移动端ios复制

未结贴
0 616
风生水起未认证 2018-09-05 10:29:58
收藏

今天做一个html复制剪贴板功能,只记得以前做过这个功能,用的是独立的js库Zero Clipboard,由于现在浏览器的更新,以及用户体验的提升,flash已经不再实用,而这种复制功能必须要有flash的支持,果断找其它的替换方案

clipboard.js就能实现纯html的复制

取代flash复制到剪切板,更好页面性能,不会造成卡顿想象,不止兼容PC端,还优雅的兼容移动端ios的safari浏览器,类似于下面的这种效果:

官方文档及下载地址:https://clipboardjs.com/

浏览器兼容

简单使用说明

1、在你的要做复制功能的页面引入核心js文件clipboard.js或clipboard.min.js

<script type="text/javascript" src="script/clipboard.min.js"></script>

2、绑定要操作的元素

<script>
var clipboard = new ClipboardJS('.copy', {
text: function() {
return '复制的文档'; // 这里返回的是要复制的文字 你可以写死,也可以去获取,例如 $(".text").val();
}
});

clipboard.on('success', function(e) {
layer.msg("复制成功");
});

clipboard.on('error', function(e) {
layer.msg("复制失败");
});
</script>

其中copy就是对应的class=“copy”元素

其它功能

1、复制元素结点内容

  <div id="btn" data-clipboard-text="1">
<span>Copy</span>
</div>


<script>
var btn = document.getElementById('btn');
var clipboard = new ClipboardJS(btn);

clipboard.on('success', function(e) {
console.log(e);
});

clipboard.on('error', function(e) {
console.log(e);
});
</script>

2、多个元素同时绑定

<!-- 1. Define some markup -->
<button class="btn" data-clipboard-text="1">Copy</button>
<button class="btn" data-clipboard-text="2">Copy</button>
<button class="btn" data-clipboard-text="3">Copy</button>

<!-- 2. Include library -->
<script src="../dist/clipboard.min.js"></script>

<!-- 3. Instantiate clipboard by passing a string selector -->
<script>
var clipboard = new ClipboardJS('.btn');

clipboard.on('success', function(e) {
console.log(e);
});

clipboard.on('error', function(e) {
console.log(e);
});
</script>

3、指定要复制的元素

<!-- 1. Define some markup -->
<button class="btn">Copy</button>
<div>hello</div>

<!-- 2. Include library -->
<script src="../dist/clipboard.min.js"></script>

<!-- 3. Instantiate clipboard -->
<script>
var clipboard = new ClipboardJS('.btn', {
target: function() {
return document.querySelector('div');
}
});

clipboard.on('success', function(e) {
console.log(e);
});

clipboard.on('error', function(e) {
console.log(e);
});
</script>

还可以通过属性绑定到元素

还可轻松绑定到各种元素,例如input、textarea等

文件来源:https://www.tpframe.com/posts/93.html 原创文件,转载请注明出处

最近热帖 HOT TOPIC
thinkphp5隐藏默认模块的一些问题 1793
父元素flex之后,子元素高度自适应问题 1745
【全套视频】thinkphp5视频教程 1621
教你如果处理高并发数据不同步的问题php篇 1461
关于thinkphp5.0.x getshell漏洞的说明 1407
tpframe新建主题 1331
tpframe安装教程 1309
一张纸的厚度是0.01毫米,则该纸对折30次后是多厚(据说超过珠穆朗玛峰的高度)php实现 1305
TPFrame框架robot模块重磅来袭,内附2.1版本 1303
移动web资源整理,你值得收藏的干货 1289
月度热议HOT COMMENTS
tpframe 后续版本你希望有的功能是什么(分享贴) 12
关于tpframe的一点话题 6
cms插件在分类排序的时候JSON错误 6
基于tpframe v3.x 的微信公众号插件已批量上线 5
tpframe插件tcms插件v2.2已发布上线,欢迎下载使用 4
新增的管理员没有权限操作CMS模块。 3
api接口文档插件easydoc的基本用法,快速搞定接口文档 3
thinkphp5自动完成操作,两次运行的详解 2
tpframe-curd操作之添加数据 2
tpframe能带给你的,让你快速搞定各服务端(api,pc,mobile,wechat)代码的框架 2
爆料早知道:Tcms小程序功能已上线我有好想法