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

最新推荐文章于 2024-07-15 23:23:20 发布
最新推荐文章于 2024-07-15 23:23:20 发布
阅读量5k 收藏 4
点赞数 1
分类专栏： javascript 文章标签： js 一键复制 剪贴板 复制图片
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/DoDiligently/article/details/77621467
版权
本文介绍了如何实现一键复制功能，兼容PC和移动端，包括Chrome、Edge、Firefox、IE、Opera和Safari。主要使用clipboard.js库，并针对不支持此库的IE浏览器采用window.clipboardData进行兼容。同时，文中还提供了针对移动端的友好性设置，确保在iOS Safari 10以下版本或其他不支持环境下的良好用户体验。
摘要由CSDN通过智能技术生成

一 兼容性

兼容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="我是复制的内容，和前一个属性选其一使用"
最低0.47元/天 解锁文章
thiszhong
关注
  • 1
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 4
    评论
专栏目录
js：浏览器环境下复制图片到剪切板
彭世瑜的博客
07-24 1448
图片处理工具方法使用方式。
js复制到剪贴板 兼容电脑手机以及提示代码 亲测有用
qietuwang的博客
03-13 272
​js复制到剪贴板是在网页切图中经常用到的效果之一​，而剪贴板因为在不同设备下的语法略有差异
JavaScript系列：JS实现复制粘贴文字以及图片
最新发布
程序人生
07-15 838
Clipboard API 是一组用于在浏览器中操作剪贴板的 JavaScript API，它允许开发者在网页上读取和写入剪贴板内容，实现复制、剪切和粘贴等功能。是一个在网页上执行复制操作的旧式API，属于 Web API 的一部分，用于在不需要用户交互（如点击或按键）的情况下，通过脚本复制文本到剪贴板。然而，这个API在现代Web开发中已经被视为过时（deprecated），并在许多现代浏览器中受到限制或不再支持，尤其是在没有用户明确交互的情况下。
js复制图片，支持jpg和png
yy祝的博客
11-19 3491
直接上关键代码 copy_jpg('url.jpg') //示例 // 复制图片，支持jpg，png，传入图片url即可 function copy_jpg(url) { var canvas = document.createElement('canvas') // 创建一个画板 let image = new Image() image.setAttribute("crossOrigin", 'Anonymous') //可能会有跨越问题 image.src = url
原生js实现将图片内容复制到剪贴板
我驾驶汽车从不是为了从A点到达B点，我喜欢去感受汽车，与之交流，与之融为一体。
07-16 1711
【代码】原生js实现将图片内容复制到剪贴板。
JS 点击复制文本&图片
qq_41952224的博客
03-04 871
以标签内容复制，显示 html 标签，style="display:none;"的也可以复制成功 $('button').on('click', function (event) { copy($('#copy').html()); alert('复制成功'); }) function copy(str) { var save = function (e) { ...
MSN一键分享v2.0
06-15
- **兼容性**: 支持多种设备和平台，包括PC端的MSN客户端、Window Live网站，以及移动端的WPhone、iPhone MSN手机客户端等。 #### 二、MSN一键分享用户交互流程 1. **初始状态**: 用户在浏览包含分享功能的网站时...
力软新版APP上线,采用js语言,基于Vue.js和uni-app框架.pdf
03-09
力软新版APP是一款基于JavaScript语言，利用Vue.js和uni-app框架构建的移动端应用程序。这款全新的APP2.0版本是在原有应用的基础上进行开发和设计的，它不仅保留了旧版的所有功能，而且遵循力软的免费升级策略，允许...
力软新版APP上线,采用js语言,基于Vue.js和uni-app框架.docx
03-09
Vue.js是一个轻量级的前端JavaScript框架，以其简洁的API和高效的虚拟DOM著称，而uni-app则是一个跨平台的开发框架，允许开发者用一套代码生成包括iOS、Android、H5以及各种小程序在内的多个平台的应用。 新版本的...
微信小程序 Cryptojs 解密工具包
05-08
微信小程序是一种轻量级的应用开发平台，主要针对移动端，它允许开发者在微信内构建功能丰富的交互式应用，而无需安装。在这个场景下，"微信小程序 Cryptojs 解密工具包" 提供了一种加密和解密的功能，使得在微信小...
浏览器 实现复制粘贴 上传图片， js实现粘贴图片预览功能
业余前端的职业经历
08-06 2038
产品大大，突然收到用户反馈说，每次上传图片选择图片，太慢了 能不能 实现复制粘贴功能，直接在桌面上 复制下图片， ctrl + v 就可以 是实现上传了， 哎 程序员太难了 但是 大概应该是这个样子了 是不是 这样就 实现效果了呢 其实这个是元素的一个 paste事件 监听， 但是 是有条件的哈 （例如，在 或者 contenteditable 属性设置为 true的元) <textarea name="" id="" cols="30" rows="10"></textarea&g
js,复制图片
qq_43486347的博客
07-19 659
js复制图片
JS——复制文字或图片
qq812457115的博客
03-13 552
【代码】JS——复制文字或图片。
Javascript 实现复制（Copy）动作大全
W Y L
11-11 669
1、实现点击按钮，复制文本框中的的内容 <script type="text/javascript"> function copyUrl2(){ var Url2=document.getElementById("biao1"); Url2.select(); // 选择对象 document.execCommand("Copy"); // 执行浏览器复制命令 alert("已复制好，可贴粘。"); } </script> <textarea
移动端js实现点击复制到剪贴板，【真正】兼容所有浏览器uc、qq、微信、手机自带等浏览器...
weixin_34344677的博客
04-22 955
移动端js实现点击复制到剪贴板，带提示，【真正】兼容所有浏览器，包括安卓和ios及uc、qq、微信、手机自带等浏览器。 github,欢迎star: https://github.com/majiang666/copy.git 复制代码查看demo 前言：在移动端上经常会遇到这样的需求，第一种就是点击复制当前页面的链接，第二种就是类似卡券的功能，需要复制密码等，之前需求太紧急，基本上都使用了cl...
JS实现点击复制功能（完美解决移动端可用）
热门推荐
caoyan0829的博客
11-21 1万+
先看一下效果图 使用此方法不需要转换什么&lt;p&gt;标签，直接就使用&lt;textarea&gt;标签，就是把它的样式修改了一下，将背景和边框都改为你要的颜色就可以了 上代码： //Html &lt;div id="code"&gt; &lt;p class="main-yCode"&gt;你的邀请码&lt;/p&gt; &lt;textarea id=&q
js实现同时兼容pc和移动端的元素拖拽功能
05-24
要实现同时兼容 PC 端和移动端的元素拖拽功能，可以使用 HTML5 新增的 drag 事件和 touch 事件。 首先，需要将元素设置为可拖拽，可以使用 draggable 属性。例如： ```html <div draggable="true">可拖拽的元素</div> ``` 然后，需要监听元素的 dragstart、drag、dragend 事件或 touchstart、touchmove、touchend 事件来实现拖拽效果。 在 PC 端，可以使用 drag 事件来实现拖拽效果，例如： ```javascript var dragElement = document.getElementById('drag-element'); dragElement.addEventListener('dragstart', function(event) { // 拖拽开始时，保存拖拽元素的 ID event.dataTransfer.setData('text/plain', event.target.id); }); document.body.addEventListener('dragover', function(event) { // 阻止默认拖拽行为 event.preventDefault(); }); document.body.addEventListener('drop', function(event) { // 阻止默认拖拽行为 event.preventDefault(); // 获取拖拽元素的 ID var id = event.dataTransfer.getData('text/plain'); var dragElement = document.getElementById(id); // 将拖拽元素添加到放置区域 event.target.appendChild(dragElement); }); ``` 在移动端，可以使用 touch 事件来实现拖拽效果，例如： ```javascript var dragElement = document.getElementById('drag-element'); var startX, startY; dragElement.addEventListener('touchstart', function(event) { startX = event.touches[0].clientX; startY = event.touches[0].clientY; }); dragElement.addEventListener('touchmove', function(event) { var offsetX = event.touches[0].clientX - startX; var offsetY = event.touches[0].clientY - startY; // 移动元素 this.style.transform = 'translate(' + offsetX + 'px, ' + offsetY + 'px)'; }); dragElement.addEventListener('touchend', function(event) { // 拖拽结束时，清除 transform 样式 this.style.transform = ''; }); ``` 需要注意的是，移动端的 touch 事件可能会和浏览器默认行为冲突，需要使用 preventDefault() 方法来阻止默认行为。另外，由于移动端的屏幕尺寸多样化，需要根据具体情况来调整拖拽的逻辑和样式。
评论 4
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值