zoukankan      html  css  js  c++  java
  • 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"> 
    <!-- Trigger -->
    <button class="btn" data-clipboard-target="#foo">  Copy to clipboard</button>
    
    <script>    
        //必须要初始化 第一种初始化    
        var clipboard = new ClipboardJS('.btn');    
        clipboard.on('success', function(e) {        
            console.log(e);    
        });    
        clipboard.on('error', function(e) {        
            console.log(e);    
        });  
    </script>
    

    使用二

    <div id="btn" data-clipboard-text="1">
        <span>Copy</span>
    </div>
    
    <script>    
        var btn = document.getElementById('btn');    
        var clipboard = new ClipboardJS(btn);    
        clipboard.on('success', function(e) {        
            console.log(e);    
        });    
        clipboard.on('error', function(e) {        
            console.log(e);    
        });
    </script>
    

    使用三

    <button data-clipboard-text="1">Copy</button>
    <button data-clipboard-text="2">Copy</button>
    <button data-clipboard-text="3">Copy</button>
    
    <script>    
        var btns = document.querySelectorAll('button');    
        var clipboard = new ClipboardJS(btns);    
        clipboard.on('success', function(e) {        
            console.log(e);    
        });    
        clipboard.on('error', function(e) {        
            console.log(e);    
        });
    </script>
    
  • 相关阅读:
    初学JS——利用JS制作的别踩白块儿(街机模式) 小游戏
    对于大数据量的Json解析
    Json数据中的特殊字符处理
    移动端总结和手机兼容问题
    在DW 5.5+PhoneGap+Jquery Mobile下搭建移动开发环境
    HTML5所有标签汇总
    二叉树
    二分查找
    归并排序
    希尔排序
  • 原文地址:https://www.cnblogs.com/smss/p/9746692.html
Copyright © 2011-2022 走看看