zoukankan      html  css  js  c++  java
  • ClipboardJS复制粘贴插件的使用

    1、简单的纯JS复制粘贴(兼容性差,只能用textarea标签)

      var btn=document.getElementsByClassName("btn")[0];  //复制按钮
      btn.onclick=function(){
        var foo = document.getElementById("foo");  //要复制的节点,只能是textarea
        foo.select();
        document.execCommand("Copy");
      }
    

    2、ClipboardJS插件的使用

    (一)简单的使用

    <textarea id="foo">123</textarea>  //被复制对象
    <button class="btn" data-clipboard-target="#foo" data-clipboard-action="copy">复制</button>  //复制
    
    new ClipboardJS('.btn');
    

    (二)高级的使用

      ClipboardJS.isSupported()  //是否兼容
    
      var clipboard = new ClipboardJS('.btn', {
        target: function(trigger) {
          return document.getElementById("foo")  //选择对象
        }
      });
    
      var clipboard = new ClipboardJS('.btn', {
        text: function(trigger) {
          return 123567;  //复制内容
        }
      })
    
      clipboard.on('success', function(e) {
        console.info('Action:', e.action);  //复制类型
        console.info('Text:', e.text);  //复制文本
        console.info('Trigger:', e.trigger);  //复制节点
        e.clearSelection();  //取消选择节点
      });  
    
      clipboard.on('error', function(e) {
        console.error('Action:', e.action);
        console.error('Trigger:', e.trigger);
      });
    

      

  • 相关阅读:
    HDU 2013(递归)
    紫书搜索 习题7-6 UVA
    紫书搜索 习题7-4 UVA
    紫书搜索 习题7-3 UVA
    紫书搜索 习题7-2 UVA
    紫书搜索 习题7-1 UVA
    紫书搜索 例题7-10 UVA
    紫书搜索 例题7-13 UVA
    紫书搜索 例题7-12 UVA
    紫书搜索 例题7-9 UVA
  • 原文地址:https://www.cnblogs.com/huangqiming/p/8668738.html
Copyright © 2011-2022 走看看