移动端进入页面复制内容到粘贴板功能实现

热度:152020-03-18 20:00 收藏 0 点赞 0

刚好最近有朋友问我移动端进入页面复制内容到粘贴板功能是如何做的,其实很早之前我就研究过,这个功能在电脑端容易实现,但是在手机端安卓和IOS有区别,导致很多不兼容。

思来想去,最方便的还是使用clipboard,下面我就直接放代码说明。

1. 引入clipboard js库

  <script src="https://cdn.bootcss.com/clipboard.js/2.0.6/clipboard.js"></script>

2. 写一个展示区域

<!-- Target -->
<input id="foo" style="opacity: 0;" type="text" value="这里存放复制内容">

<!-- Trigger -->
<a class="btn" data-clipboard-action="copy"  data-clipboard-target="#foo">
  
</a>

3. 对这个区域进行隐藏,不显示在页面

  <style>
  .btn{    margin: 0;
    top: 0;
    width: 100%;
    height: 100%;
    position: fixed;
    z-index: 99999;
	cursor: pointer;
    left: 0;}
  </style>

4. JS代码

<script type="text/javascript">
var clipboard = new ClipboardJS('.btn');

clipboard.on('success', function(e) {
    console.info('Action:', e.action);
    console.info('Text:', e.text);
    console.info('Trigger:', e.trigger);
	alert('成功!');
    e.clearSelection();
});

clipboard.on('error', function(e) {
    console.error('Action:', e.action);
    console.error('Trigger:', e.trigger);
	alert('失败!');
});

</script>

测试网址:https://2wex.com/file/copy/index.html


关注公众号 回复 “复制粘贴” 获取资源

暂无评论
登录后才可以评论~立即登录

如何获取资源?

您可以关注底部公众号,回复文章提示的 “ 关键词 ” 获取对应资源。

每日分享

每日分享收集的网络资源,其中包含开源项目、小工具、常用软件,以及音频视频、电子书籍等。

B站bilibili高清视频下载软件

B站bilibili高清视频下载软件

B站高清1080P视频极速下载!

冰点下载器-百度文库/豆丁文库/道客巴巴/51方案/电器天下等文库下载神器

冰点下载器-百度文库/豆丁文库/道...

文库下载神器,支持各文档平台!

抽象话表情话生成

抽象话表情话生成

最近很火的抽象话,表情话生成

电脑文件误删除、误格式化恢复工具

电脑文件误删除、误格式化恢复工...

实用的电脑文件删除后恢复工具

B站BV和AV视频连接转换接口

B站BV和AV视频连接转换接口

B站视频,bilibili视频BV转换AV接口

一学就会的100个易学小魔术 哄女朋友必备

一学就会的100个易学小魔术 哄女...

简单小魔术