clipboard.js存在的问题

clipboard.js  是一个复制到剪贴板的库。

github:https://github.com/zenorocha/clipboard.js

兼容性:IE9一下不支持。

再做微信端的项目接到了一个需求。点击按钮把指定的内容复制到剪贴板中。

刚开始用的是:document.execCommand("Copy"); 大部分的属性只有IE支持。比如:贴贴。

想了想我只用复制而且用的是微信端。只要安卓和苹果支持能够使用就可以了。

<input type="text" id="contents" value="测试复制">
<a id="but" onclick="jsCopy()">点击复制</a>

<script type="text/javascript">
    function jsCopy(){
      var e=document.getElementById("contents");//对象是contents
      e.select(); //选择对象
      tag=document.execCommand("Copy","false",null); //执行浏览器复制命令
      if(tag){
        alert(‘复制内容成功‘);
      }
    }
</script>   

emmmmmmm。缺点就是:必须要一个input文本框才能使用。而且还不能display:none隐藏掉。必须opacity。

有点坑,先测试,安卓华为:成功。苹果5:失败。

苹果失败了那就pass掉。

从网上找找有没有库。ZeroClipboard.js

这个库通过加载一个 Flash 来实现的。这个我是拒绝的。不过后来测试了一下。安卓成功,苹果失败。(可能没仔细研究)

再找:

Clipboard.js 。体积少,没有引入乱七八糟的东西。我比较喜欢。

 <a id="but" >点击复制</a>

<script type="text/javascript">
    var clipboard = new Clipboard(‘#but‘, {
    text: function() {    // 如果想从其它DOM元素内容复制。应该是target:function(){return: };
      return ‘测试复制‘;
    }
  });
  clipboard.on(‘success‘, function(e) {
    alert("复制成功");
  });

  clipboard.on(‘error‘, function(e) {
    alert("复制失败");
  });
</script>

结构比较明确。new一个实例。然后调用方法。

再测试,安卓:成功。 苹果:失败。

why!!!!!

从网上找:

想让苹果支持这个功能。元素只能为button标签。其它均不成。

 <button id="but" >点击复制</button>

<script type="text/javascript">
    var clipboard = new Clipboard(‘#but‘, {
    text: function() {    // 如果想从其它DOM元素内容复制。应该是target:function(){return: };
      return ‘测试复制‘;
    }
  });
  clipboard.on(‘success‘, function(e) {
    alert("复制成功");
  });

  clipboard.on(‘error‘, function(e) {
    alert("复制失败");
  });
</script>

 成功!。

原文地址:https://www.cnblogs.com/xf-zhao/p/9146150.html

时间: 2024-10-04 01:28:12

clipboard.js存在的问题的相关文章

clipboard.js在剪切中的使用

目前只是对文字的复制. 下面的代码解释: 1.html 需要添加data-clipboard="copy"和data-clipboard-target="对象选择器"的属性. 其中data-clipboard-target表示复制的目标,用选择的形式表示,包括类选择器,id选择器,元素选择器等. <section> <p id="qq1">123456789</p> <input type="b

使用clipboard.js复制页面内容到剪切板

最近在做一个的智能客服Web端浏览器应用,其中有一项需求是客户在获取系统返回的 答案后点击“复制答案”按钮将答案复制到系统剪切板.本以为这是一个小case,但是发现如果 要对各种主流浏览器都有良好的兼容性并不简单.原因在于出于安全原因,大多数现代浏览 器都未提供通用的剪贴板复制接口(或即便有,也默认被禁用). 上网搜索了一下,现有的方案大致有两种: 一:使用原生javascript中window.clipboardData实现复制到剪贴板功能: 二:使用Zero Clipboard库: 在尝试了

记录使用clipboard.js实现点击复制链接到剪切板的历程

记录使用clipboard.js实现点击复制链接到剪切板的历程 前几天接到一个任务,让实现当用户在首页点击按钮(说是按钮,只是外观是按钮,其实是一个a标签)时弹出弹窗告诉用户已经复制了活动链接,同时将链接复制到用户的剪切板中. 听起来贼简单的功能,分任务的时候甚至有人说就1,2行代码就搞定了.于是这简单的任务就给了我(菜鸟实习生  =-=),我真是信了你的邪~~!. 在我做的时候,才发现,听起来挺简单的任务,但是如果要实现对不同浏览器兼容,其实并不简单. 列举一下我找到的各种实现方法吧: 1.d

Clipboard.js实现复制内容到剪切板

<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

Clipboard.js : 移动端浏览器实现网页内容复制

.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

js实现剪切、复制、粘贴——clipBoard.js

摘要: 最近项目上要实现一个点击按钮复制链接的功能,刚开始查找了一些资料,找了几款插件,ZeroClipboard是通过flash实现的复制功能,随着越来越多的提议废除flash,于是就想能不能通过js来实现复制剪切呢? 地址:https://github.com/baixuexiyang/clipBoard.js 方法: 复制 var copy = new clipBoard(document.getElementById('data'), { beforeCopy: function() {

Clipboard.js:不用Flash实现剪贴板功能的轻量级JavaScript库

Zeno Rocha发布了一个专门用于从web页面向本地计算机的剪贴板复制文本的JavaScript库:Clipboard.js. 在每一个Github仓库页面的侧边栏上都有一个小部件,用来显示repo的HTTPS克隆地址,当你点击紧挨着这个部件的按钮时,就会复制当前repo的URL到用户的剪贴板中.Github用JavaScript库ZeroClipboard来实现这一功能,问题是这个库是用一个不可见的Flash来完成剪贴操作,而Flash技术正被各大浏览器厂商冷落,所以势必要有一个新的方案.

clipboard.js在弹出框中无法复制的问题

前几天发现了个bug,在jquery-ui的弹出框(dialog)中,使用clipboard.js实现的复制功能,竟然不会生效,后面查了下相关资料,发现不止jquery-ui的dialog不行,其他的模态框,例如bootstrap的,也是一样不会生效的.原因就是弹出框会自动focus,而复制的底层实现是要获取选中的内容,失去焦点后就无法获取到了,从而导致复制失败. 解决办法: 1)对于 Bootstrap 模态框(Modals)中使用,或是在其他修改焦点的类库中使用,你会希望将获得焦点的元素设置

Clipboard.js实现复制

Clipboard.js实现文本复制或者剪切到剪切板 引用js文件 <script type="text/javascript" src="./dist/clipboard.min.js"></script> 使用一 <!-- Target --> <input id="foo" value="https://github.com/zenorocha/clipboard.js.git"