解决ZeroClipboard.js一键复制，网页滚动后无法复制问题

最新推荐文章于 2017-10-27 17:12:43 发布
最新推荐文章于 2017-10-27 17:12:43 发布
阅读量218 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lorry2010/article/details/84380291
版权

一键复制，兼容各种浏览器的做法是用ZeroClipboard.js的flash实现。具体原理不清楚，但是他是将flash的事件固定在某个地方，这个地方可覆盖在某个按钮上。

但如果这个按钮需要随屏幕滚动而改变位置。flash的定位还是在原来地方，再点击按钮就不会有作用了。

ZeroClipboard提供有reposition方法但定位的位置始终是距离网页高度，而不是屏幕的高度。

为了让flash固定在屏幕的某个位置，可以通过修改ZeroClipboard.js源码，

将style.position = 'absolute';修改为style.position = 'fixed';

absolute的意思是相对于某个元素的位置。而fixed是相对于浏览器的位置和网页无关了

lorry2010
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
ZeroClipboard.js使用一个flash复制多个文本框
12-29
ZeroClipboard.js是一个支持复制和粘贴的JavaScript插件，目前官方已经到2.x的版本了，但不支持IE9以下的浏览器，而如果要兼容，则可以使用1.x的版本，我使用的是最开始的一个版本：1.0.7的。该版本支持IE7和IE8，...
ZeroClipboard.js 复制到剪切板（保准好用）
08-05
在浏览器环境中，由于安全限制，JavaScript通常无法直接访问操作系统级别的剪切板，而ZeroClipboard.js巧妙地利用了Flash插件来解决这个问题，实现了跨浏览器的剪切板复制功能。这个库在用户交互时特别有用，比如...
让网页内容不可以复制和滚动条样式
Hello World
02-06 130
让网页内容不可以复制： <script> document.oncontextmenu =function(){return false;}; document.onmousedown = function(){return false;}; document.ondragstart =function(){return false;}; document.onse...
ZeroClipboard2跨浏览器复制粘贴
随-记的专栏
07-24 3214
摘要：我们平时常用到的复制粘贴功能，在浏览器端，要想使用一个按钮来实现，使用原生js代码来实现，是困难的，幸好ZeroClipboard的出现，解决了这一尴尬的问题。ZeroClipboard2简介在前端页面设计时，按钮常常伴随着数据的提交或重置出现。然而某一次，需求是点击按钮，将后台展示在页面的特定内容复制到剪切板，这样用户就省去了选中文字并按Crtl+C的操作。这使我有机会接触并使用到了一款好的
ZeroClipboard复制点击两次问题
chuzhapa4066的博客
06-15 122
今天遇到了ZeroClipboard必须点击两次才能复制的问题，记录一下，贴上正确的复制代码。 var clip = new ZeroClipboard($('#copy_btn')); ZeroClipboard.config({ forceHandCursor : true, swfP...
使用Zeroclipboard实现复制功能
Gin
09-12 3250
网页开发中需要实现复制功能时，在网上找到的诸多简单的代码（document.execCommand("Copy")）似乎大多数只能在IE下实现，并不能在Chrome等当下主流浏览器下实现。要在这些主流浏览器实现复制功能，就可以用到下面介绍的方法：使用一个跨浏览器的库类 Zero Clipboard。 Zero Clipboard 的实现原理  Zero Clipboard 利用 Flash 进
ZeroClipboard 复制到剪切板 的一些事件
韩世雷 程序员专栏
12-27 3191
ZeroClipboard.config({ moviePath: "http://zeroclipboard.org/javascripts/zc/ZeroClipboard_1.3.1.swf", cacheBust: false, forceHandCursor: true, autoActivate: false, debug: true });
ZeroClipboard.js ZeroClipBoard.swf
01-12
ZeroClipboard.js ZeroClipBoard.swf下载
ZeroClipboard.min.js
08-05
ZeroClipboard.min.js跨浏览器完美复制，可以多版本多浏览器实现一键复制的功能
ZeroClipboard.js实现js复制功能
08-04
《使用ZeroClipboard.js实现JavaScript复制功能详解》 在Web开发中，我们经常遇到需要实现文本复制功能的情况，比如用户点击按钮就能将一段文字复制到剪贴板。在浏览器的沙盒环境中，JavaScript不能直接访问系统...
ZeroClipboard实现跨浏览器点击复制文本功能
zaqwsx20的专栏
02-22 1586
后台开发过程中常常要实现点击复制文本的功能，但很多浏览器出于安全考虑不支持js复制文本，使用开源库ZeroClipboard可以很好地解决该问题。 从ZeroClipboard的官网http://zeroclipboard.org/下载库文件。 在页面上引入ZeroClipboard并配置好ZeroClipboard.swf的路径。（ZeroClipboard使用flash来实现复制，无法在移
zeroClipboard定位不准及多个地方使用所遇到的问题
u014041559的专栏
08-13 1232
将自己在项目中使用时所遇到的定位不准及多地方使用复制而导致的复制不成功的问题做记录，若也有人遇到类似问题，可以作为一个参考。 网上很多地方都可以搜索到Zero Clipboard的实现原理以及使用方法，这里就不赘述了，只讲遇到的问题以及解决办法。 问题一、网页一般有主界面以及一些弹出框，当主界面和弹出框中都有复制按钮需要进行复制时，主界面的复制能够复制成功，但是弹出框中点击复制所生成的
ZeroClipboard，竟然无法在Google Chrome浏览器中使用
沉默王二
10-27 9981
事情是非常让人不爽的，本来看起来挺简单的ZeroClipboard，我怎么就是搞不定。折腾了将近一下午的时间，发现同样的代码在Firefox浏览器上运行ZeroClipboard就是正常的，而Google Chrome浏览器却无法实现copy的功能！让我先抱怨两句吧，在GitHub上找了各种版本的ZeroClipboard，也在百度上搜了各种解决办法，发现人家的例子都在Firefox浏览器上运行正常
ZeroClipboard 不支持手机浏览器复制 H5页面的几种复制方式分享
骑着蚂蚁追大象的博客
08-20 3819
ZeroClipboard能很好的兼容各大主流的浏览器，实现复制功能，所以在PC端建议使用ZeroClipboard来达到这个功能。 但是ZeroClipboard是基于flash来实现复制的，所以在手机上无法使用，这里给大家分享2个方式，在手机上可以实现复制功能，但不能兼容所有的浏览器，比如手机版的QQ浏览器就不支持，其他浏览器暂未测试。 第一种： 优点：代码简单，容易理解。 缺点：能够
ZeroClipboard使用
乌龟赛跑
08-31 3771
GitHub官方项目下载最新文件和demo，此文适用于ZeroClipboard 2.x。 声明：本文并不保障完全正确，只是我在参考了网上很多文章失败，按照目前的做法正确了，特在此记录。 1、ZeroClipboard依赖于jquery，确保引入了jquery，并放在同一目录下。 2、ZeroClipboard.js   ZeroClipboard.min.js   ZeroClipbo
Clipboard.js实现复制文本到剪贴板功能
FE小白的进化之路
07-19 3314
Clipboard.js是一个轻量级的实现复制文本到剪贴板功能的JavaScript插件，该插件可以将输入框，文本域，DOM节点元素中的文本内容复制到剪贴板中。 官网地址：https://clipboardjs.com/  浏览器兼容性：兼容Chrome、Firefox、Opera、Safari、IE9+ 对于不兼容的浏览器版本也有优雅的降级处理，可以采用下面的方式 clipboard.o
用javascript语言同时依赖zeroclipboard 帮我写一个web网页的点击按钮复制的功能，
最新发布
02-17
好的，以下是使用 JavaScript 和 ZeroClipboard 实现点击按钮复制文本的示例代码： 首先，在 HTML 中创建一个按钮和一个文本框： ```html <input type="text" id="copy-text" value="要复制的文本"> <button id="copy-button">复制</button> ``` 然后在 JavaScript 中，使用 ZeroClipboard 创建一个复制按钮，并添加复制事件： ```javascript // 引入 ZeroClipboard import ZeroClipboard from 'zeroclipboard'; // 获取按钮和文本框元素 const copyButton = document.getElementById('copy-button'); const copyText = document.getElementById('copy-text'); // 创建 ZeroClipboard 实例 const clipboard = new ZeroClipboard(copyButton); // 添加复制事件 clipboard.on('copy', (event) => { event.clipboardData.setData('text/plain', copyText.value); }); ``` 现在，当用户点击“复制”按钮时，按钮上的文本将被复制到剪贴板中。 注意：使用 ZeroClipboard 时，必须先引入 ZeroClipboard 库文件。此外，也可以通过 npm 安装 ZeroClipboard 模块。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值