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

热度:1732020-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


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

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

如何获取资源?

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

每日分享

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

分享两个远程工具-ToDesk和向日葵

分享两个远程工具-ToDesk和向日葵...

在工作生活中经常用到远程,QQ远程很卡,第三方远程工具就比较方便了。

爱奇艺万能播放器2018年完整版

爱奇艺万能播放器2018年完整版

2018年的爱奇艺万能播放器,功能齐全,没有广告!

分享500套个人求职简历模板

分享500套个人求职简历模板

500套免费求职简历下载!

一款最近很火的自动跳过广告APP,无root直装版

一款最近很火的自动跳过广告APP,...

自动跳过广告,无需root

WPS免费去广告电脑软件

WPS免费去广告电脑软件

wps广告实在太多了,下载一个去广告版本

强制突破进入好友QQ空间

强制突破进入好友QQ空间

一款突破好友进入QQ空间的软件