扫一扫浏览

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

未结贴
0 111
风生水起未认证 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
TPFrame框架简介 1241
【全套视频】thinkphp5视频教程 1088
TPFrame安装说明 1065
TPFrame目录结构 949
tpframe之添加数据 902
tpframe基类介绍 898
TPFrame源码获取 829
TPFrame用户协议 766
TPFrame开发规范 766
TPFrame数据字典 738
月度热议HOT COMMENTS
tpframe 后续版本你希望有的功能是什么(分享贴) 9
关于tpframe的一点话题 6
cms插件在分类排序的时候JSON错误 6
为了框架的良性发展,tpframe招募成员了 4
新增的管理员没有权限操作CMS模块。 3
thinkphp5自动完成操作,两次运行的详解 2
tpframe-curd操作之添加数据 2
tpframe能带给你的,让你快速搞定各服务端(api,pc,mobile,wechat)代码的框架 2
slide模块发布 2
透析thinkphp5升级版开发框架tpframe 2
爆料早知道:TPFrame v3.1已经发布,赶快下载体验吧!我有好想法