扫一扫浏览

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

未结贴
0 2880
风生水起未认证 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
父元素flex之后,子元素高度自适应问题 5080
thinkphp5隐藏默认模块的一些问题 4740
一张纸的厚度是0.01毫米,则该纸对折30次后是多厚(据说超过珠穆朗玛峰的高度)php实现 4403
关于thinkphp5.0.x getshell漏洞的说明 4126
tpframe新建主题 4071
教你如果处理高并发数据不同步的问题php篇 4058
移动web资源整理,你值得收藏的干货 3926
【全套视频】thinkphp5视频教程 3905
omnicore rpc api中文手册【usdt】 3878
2018最新版PHP视频教程-ThinkPHP5商城系统+项目实战 3789
月度热议HOT COMMENTS
tpframe 后续版本你希望有的功能是什么(分享贴) 12
权限那里怎么一登录别的账号就报错啊 9
关于tpframe的一点话题 6
cms插件在分类排序的时候JSON错误 6
基于tpframe v3.x 的微信公众号插件已批量上线 5
tpframe插件tcms插件v2.2已发布上线,欢迎下载使用 5
tpframe6.0马上就要跟大家见面了,一次全新的升级 5
新增的管理员没有权限操作CMS模块。 3
api接口文档插件easydoc的基本用法,快速搞定接口文档 3
thinkphp5自动完成操作,两次运行的详解 2