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

一键复制功能实现：clipboard.js与IE兼容方案

最新推荐文章于 2025-03-13 21:31:04 发布

thiszhong

最新推荐文章于 2025-03-13 21:31:04 发布

阅读量5.2k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： javascript 文章标签： js 一键复制剪贴板复制图片

本文链接：https://blog.youkuaiyun.com/DoDiligently/article/details/77621467

本文介绍了如何实现一键复制功能，兼容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.js
- window.clipboardData 兼容IE
- 友好型补充（主要针对移动端）

二整体思路

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

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

三 clipboard.js使用

官方文档：https://clipboardjs.com/#example-text
使用总结：
1. 通过npm或者cdn或者直接引入 clipboard.js
2. 使用方法@1 行内

<!-- 复制内容节点 -->
<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="我是复制的内容，和前一个属性选其一使用">