zoukankan      html  css  js  c++  java
  • 使用clipboard.js复制示例

    项目地址:https://github.com/zenorocha/clipboard.js

    代码示例为其demo示例

    注:示例中的clipboard.min.js为https://github.com/zenorocha/clipboard.js/tree/master/src的clipboard.js

    1.复制节点值,下面示例事先对列表中的data-clipboard-text赋值,点击元素就会复制其属性值

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>constructor-nodelist</title>
        <meta name="viewport" content="width=device-width, initial-scale=1">
    </head>
    <body>
        <!-- 1. Define some markup -->
        <button data-clipboard-text="1">Copy</button>
        <button data-clipboard-text="2">Copy</button>
        <button data-clipboard-text="3">Copy</button>
    
        <!-- 2. Include library -->
        <script src="../dist/clipboard.min.js"></script>
    
        <!-- 3. Instantiate clipboard by passing a list of HTML elements -->
        <script>
        var btns = document.querySelectorAll('button');
        var clipboard = new Clipboard(btns);
    
        clipboard.on('success', function(e) {
            console.log(e);
        });
    
        clipboard.on('error', function(e) {
            console.log(e);
        });
        </script>
    </body>
    </html>
    以及这种方式:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>constructor-selector</title>
        <meta name="viewport" content="width=device-width, initial-scale=1">
    </head>
    <body>
        <!-- 1. Define some markup -->
        <button class="btn" data-clipboard-text="1">Copy</button>
        <button class="btn" data-clipboard-text="2">Copy</button>
        <button class="btn" data-clipboard-text="3">Copy</button>
    
        <!-- 2. Include library -->
        <script src="../dist/clipboard.min.js"></script>
    
        <!-- 3. Instantiate clipboard by passing a string selector -->
        <script>
        var clipboard = new Clipboard('.btn');
    
        clipboard.on('success', function(e) {
            console.log(e);
        });
    
        clipboard.on('error', function(e) {
            console.log(e);
        });
        </script>
    </body>
    </html>
    

    2.复制指定元素,下面事例对指定的标签元素进行复制

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>function-target</title>
        <meta name="viewport" content="width=device-width, initial-scale=1">
    </head>
    <body>
        <!-- 1. Define some markup -->
        <button class="btn">Copy</button>
        <div>hello</div>
    
        <!-- 2. Include library -->
        <script src="../dist/clipboard.min.js"></script>
    
        <!-- 3. Instantiate clipboard -->
        <script>
        var clipboard = new Clipboard('.btn', {
            target: function() {
                return document.querySelector('div');
            }
        });
    
        clipboard.on('success', function(e) {
            console.log(e);
        });
    
        clipboard.on('error', function(e) {
            console.log(e);
        });
        </script>
    </body>
    </html>
    

    以及这种方式,指定了要复制的是一个div标签的元素

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>target-div</title>
        <meta name="viewport" content="width=device-width, initial-scale=1">
    </head>
    <body>
        <!-- 1. Define some markup -->
        <div>hello</div>
        <button class="btn" data-clipboard-action="copy" data-clipboard-target="div">Copy</button>
    
        <!-- 2. Include library -->
        <script src="../dist/clipboard.min.js"></script>
    
        <!-- 3. Instantiate clipboard -->
        <script>
        var clipboard = new Clipboard('.btn');
    
        clipboard.on('success', function(e) {
            console.log(e);
        });
    
        clipboard.on('error', function(e) {
            console.log(e);
        });
        </script>
    </body>
    </html>
    



    3.动态复制值,下面示例在初始化clipboard对象时,通过text对所要复制的内容进行复制

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>function-text</title>
        <meta name="viewport" content="width=device-width, initial-scale=1">
    </head>
    <body>
        <!-- 1. Define some markup -->
        <button class="btn">Copy</button>
    
        <!-- 2. Include library -->
        <script src="../dist/clipboard.min.js"></script>
    
        <!-- 3. Instantiate clipboard -->
        <script>
        var clipboard = new Clipboard('.btn', {
            text: function() {
                return 'to be or not to be';
            }
        });
    
        clipboard.on('success', function(e) {
            console.log(e);
        });
    
        clipboard.on('error', function(e) {
            console.log(e);
        });
        </script>
    </body>
    </html>
    

    4.对指定输入框或文本域的内容进行复制

    输入框:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>target-input</title>
        <meta name="viewport" content="width=device-width, initial-scale=1">
    </head>
    <body>
        <!-- 1. Define some markup -->
        <input id="foo" type="text" value="hello">
        <button class="btn" data-clipboard-action="copy" data-clipboard-target="#foo">Copy</button>
    
        <!-- 2. Include library -->
        <script src="../dist/clipboard.min.js"></script>
    
        <!-- 3. Instantiate clipboard -->
        <script>
        var clipboard = new Clipboard('.btn');
    
        clipboard.on('success', function(e) {
            console.log(e);
        });
    
        clipboard.on('error', function(e) {
            console.log(e);
        });
        </script>
    </body>
    </html>
    
    文本域:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>target-textarea</title>
        <meta name="viewport" content="width=device-width, initial-scale=1">
    </head>
    <body>
        <!-- 1. Define some markup -->
        <textarea id="bar">hello</textarea>
        <button class="btn" data-clipboard-action="cut" data-clipboard-target="#bar">Cut</button>
    
        <!-- 2. Include library -->
        <script src="../dist/clipboard.min.js"></script>
    
        <!-- 3. Instantiate clipboard -->
        <script>
        var clipboard = new Clipboard('.btn');
    
        clipboard.on('success', function(e) {
            console.log(e);
        });
    
        clipboard.on('error', function(e) {
            console.log(e);
        });
        </script>
    </body>
    </html>
    


  • 相关阅读:
    IO复用三种方式
    sql server如何通过pivot对数据进行行列转换(进阶)
    sql server排序规则冲突问题解决
    sql server如何通过pivot对数据进行行列转换
    sql server如何通过排序控制insert into ... select ... 语句的记录插入顺序
    sql server如何用不同语种语言显示报错的错误消息
    Python编程求解第1天1分钱之后每天两倍持续一个月的等比数列问题
    sql server临时删除/禁用非聚集索引并重新创建加回/启用的简便编程方法研究对比
    sql server通过临时存储过程实现使用参数添加文件组脚本复用
    sql server重建全库索引和更新全库统计信息通用脚本
  • 原文地址:https://www.cnblogs.com/dulinan/p/12033049.html
Copyright © 2011-2022 走看看