开发中经常会用到复制的功能,在 IE 下实现比较简单.但要想做到跨浏览器比较困难了.本文将介绍一个跨浏览器的库类 Zero Clipboard .它利用 Flash 进行复制,所以只要浏览器装有 Flash 就可以运行,而且比 IE 的 document.execCommand("Copy") 更加灵活. Zero Clipboard 的实现原理 Zero Clipboard 利用 Flash 进行复制,之前有 Clipboard Copy 解决方案,其利用的是一个隐藏的 Flash.…
app中使用,框架用的是vue.js 1.显示要下载这个Clipboard.js插件 package-lock.json里面 "clipboard-polyfill": { "version": "2.3.0", "resolved": "https://registry.npmjs.org/clipboard-polyfill/-/clipboard-polyfill-2.3.0.tgz", "…
项目地址:https://github.com/zenorocha/clipboard.js 现代化的“复制到剪切板”插件.不包含 Flash.gzip 压缩后仅 3kb. 为什么使用它 复制文字到剪切板不应该很难去实现.它不需要配置几十个步骤或者加载几百 KB 的文件.最重要的是,它不应该依赖 Flash 或其他臃肿的框架. 这是 clipboard.js 诞生的原因. 安装 你可以通过 npm 来安装它. npm install clipboard --save 如果你不使用包管理,仅需要下…
最近在做一个的智能客服Web端浏览器应用,其中有一项需求是客户在获取系统返回的 答案后点击“复制答案”按钮将答案复制到系统剪切板.本以为这是一个小case,但是发现如果 要对各种主流浏览器都有良好的兼容性并不简单.原因在于出于安全原因,大多数现代浏览 器都未提供通用的剪贴板复制接口(或即便有,也默认被禁用). 上网搜索了一下,现有的方案大致有两种: 一:使用原生javascript中window.clipboardData实现复制到剪贴板功能: 二:使用Zero Clipboard库: 在尝试了…
.bl { padding: 5px 10px; border-left: 3px solid #009a61; background: #f6f6f6; color: #555; font-size: 1em } .bottom-line { border-bottom: 2px solid #009a61; padding-bottom: 8px } 最近在项目中遇到这样一个需求: 点击按钮,将指定的URL复制到剪贴板,然后用户可以粘贴到浏览器(Safari为主)自行打开. 方案一:zero…
摘要: 最近项目上要实现一个点击按钮复制链接的功能,刚开始查找了一些资料,找了几款插件,ZeroClipboard是通过flash实现的复制功能,随着越来越多的提议废除flash,于是就想能不能通过js来实现复制剪切呢? 地址:https://github.com/baixuexiyang/clipBoard.js 方法: 复制 var copy = new clipBoard(document.getElementById('data'), { beforeCopy: function() {…
clipboard.js 可以实现纯 JS 的从浏览器复制文本到系统剪贴板的功能. 使用方法: 1. 下载 clipboard.js,并在页面中引入该插件.clipboard.js 下载地址: https://github.com/zenorocha/clipboard.js <script src="/lib/js/clipbaord.js"></script> 2. 需要复制的目标文本 <span id="tar_text" >…
1.前沿 在项目中使用clipboard.js插件去实现点击按钮,复制一段网址到剪切板的功能.功能做好后,一开始无论这pc端还是移动端都能正常使用.突然某一天测出了一个bug:移动端复制失败,pc端是ok的.简直一脸懵逼... 遇到这个bug,我第一个思考到的是,这是个常用的插件,网上应该有现成的解决方法.网友分享的方法是:把绑定data-clipboard-target属性的按钮标签从div换成button.亲测后,不起效果,可能不是一个原因导致的.通过摸索,找到了bug的原因和可解决方案.我…
<script type="text/javascript"> var clipboard1 = new Clipboard('.bt01'); clipboard1.on('success', function (e) { alert("Copy Url Success!"); e.clearSelection(); }); </script> <div class="mt5"><img src=&qu…
复制文本到剪贴板应该并不难,目前已经有很成熟的 Flash 方法.但是 Flash 已经在很多场合不适用了,特别是随着 HTML5 技术的发展.今天推荐的这个 Clipboard.js 库不依赖 Flash,依赖于 Selection 和 execCommand API.execCommand 支持以下浏览器:Chrome浏览器42+,火狐41+,IE9+. 官方网站 您可能感兴趣的相关文章 网站开发中很有用的 jQuery 效果[附源码] 分享35个让人惊讶的 CSS3 动画效果演示 十分惊艳…