JS一键复制 兼容PC(包括图片)+移动端

本文介绍了如何实现一键复制功能,兼容PC和移动端,包括Chrome、Edge、Firefox、IE、Opera和Safari。主要使用clipboard.js库,并针对不支持此库的IE浏览器采用window.clipboardData进行兼容。同时,文中还提供了针对移动端的友好性设置,确保在iOS Safari 10以下版本或其他不支持环境下的良好用户体验。

一 兼容性

兼容PC+手机端,Chrome 42+、Edge 12+、Firefox 41+、IE、Opera 29+、Safari 10+,PC支持复制图片,手机端友好交互。其中:
- clipboard.jsChrome 42+、Edge 12+、Firefox 41+、IE 9+、Opera 29+、Safari 10+
- window.clipboardData 兼容IE
- 友好型补充(主要针对移动端)

二 整体思路

最近做了一个需要 一键复制 功能的网站,也是经历了一番挣扎,下面给出自己的一些总结,欢迎大家补充。

  • ZeroClipboard.js虽然兼容性较好,但需要Flash,本文不考虑。如不在意flash可以尝试
  • 本文主体clipboard.js
  • 针对不兼容的IE版本尝试使用window.clipboardData
  • 交互友好型补充方案(主要针对移动端)

三 clipboard.js使用

<!-- 复制内容节点 -->
<input id="foo" value="https://github.com/zenorocha/clipboard.js.git">

<!-- 触发节点 -->
<button class="btn" data-clipboard-action="copy" data-clipboard-target="#foo" data-clipboard-text="我是复制的内容,和前一个属性选其一使用">
评论 4
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值