clipboard使用总结---web复制粘贴库 - 起点终站

我们应该感谢相遇,无论结局是喜是悲....
clipboard使用总结---web复制粘贴库
  • 首页 > 教程小结
  • 作者:起点终站
  • 2017年7月13日 16:19 星期四
  • 浏览:6342
  • 字号:
  • 评论:1
  • 1. 概述

    clipboard.js是一款轻量级的实现复制文本到剪贴板功能的JavaScript插件。通过该插件可以将输入框,文本域,DIV元素中的文本等文本内容复制到剪贴板中 
    clipboard.js支持主流的浏览器:chrome 42+; Firefox 41+; IE 9+; opera 29+; Safari 10+; 
    官网

    2. 使用方式

    2.1 引入js文件

    以下所有的代码都使用到以下js文件


    <script src="clipboard.min.js"></script> 

    clipboard复印内容的方式有 
    - 从target复印目标内容 
    - 通过function 要复印的内容 
    - 通过属性返回复印的内容

    2.2 从target复印目标内容

    可以从input、textare、div中通过copy/cut获取内容目标内容,其HTML的代码如下

    • data-clipboard-target指向复印节点,这里指input的目标id 
      data-clipboard-action这里使用copy,同时也可以使用cut,则点击按钮后,内容里的值被剪切。如果没有指定,则默认值是copy。cut只能在input和textare中起作用

    • input
    • <input id="foo" type="text" value="hello">
      <button class="btn" data-clipboard-action="copy" data-clipboard-target="#foo">Copy</button>

    • textare 
      和上面的主要区别只是input和textare不同
    <textarea id="bar">hello</textarea> 
    <button class="btn" data-clipboard-action="cut" data-clipboard-target="#bar">Cut</button>

    • div 
      和上面的主要区别只是input和div不同
    <div>hello_div</div>
    <button class="btn" data-clipboard-action="copy" data-clipboard-target="div">Copy</button>


    以上的插件的初始化JS代码都是相同:

    <script>
           // button的class的值
            var clipboard = new Clipboard('.btn');
            clipboard.on('success', function(e) {
                console.log(e);
            });
    
            clipboard.on('error', function(e) {
                console.log(e);
            });
    </script>


    2.3 通过function 要复印的内容

    通过target,text的function复印内容

    • 通过target的function复印内容 
      通过target指定要复印的节点,这里返回值是‘hello’
        <button class="btn">Copy_target</button>
        <div>hello</div>
    
        <script>
        var clipboard = new Clipboard('.btn', {
        // 通过target指定要复印的节点
            target: function() {
                       return document.querySelector('div');
                  }
        });
    
        clipboard.on('success', function(e) {
            console.log(e);
        });
    
        clipboard.on('error', function(e) {
            console.log(e);
        });
        </script>

    • 通过text的function复印内容 
      text的function指定的复印内容,这里返回‘to be or not to be’

     <button class="btn">Copy</button>
     <script>
        var clipboard = new Clipboard('.btn', {
        // 点击copy按钮,直接通过text直接返回复印的内容
            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>

    2.4 通过属性返回复印的内容

    通过data-clipboard-text属性返回复印的内容

    • 单节点 
      通过id指定节点对象,并做为参数传送给Clipboard。这里的返回值的内容是data-clipboard-text的内容
    // 通过id获取复制data-clipboard-text的内容 
    <div id="btn" data-clipboard-text="1">
            <span>Copy</span>
    </div>
    
    <script>
        var btn = document.getElementById('btn');
        var clipboard = new Clipboard(btn);
    
        clipboard.on('success', function(e) {
            console.log(e);
        });
    
        clipboard.on('error', function(e) {
            console.log(e);
        });
    </script>

    • 多节点 
      通过button返回所有button按钮,并做为参数传送给Clipboard。每个按钮被点击时,返回值的内容是其对应的data-clipboard-text的内容,分别是1,2,3
    //  多节点获取button的data-clipboard-text值
     <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 Clipboard(btns);
    
        clipboard.on('success', function(e) {
            console.log(e);
        });
    
        clipboard.on('error', function(e) {
            console.log(e);
        });
    </script>

    • 多节点 
      通过class获取所有button按钮,并做为参数传送给Clipboard。每个按钮被点击时,返回值的内容是其对应的data-clipboard-text的内容,分别是1,2,3
    //   通过class注册多个button,获取data-clipboard-text的值
    <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>
     <script>
        var clipboard = new Clipboard('.btn');
    
        clipboard.on('success', function(e) {
            console.log(e);
        });
    
        clipboard.on('error', function(e) {
            console.log(e);
        });
    </script>



      您阅读这篇文章共花了:  
    本文作者:起点终站      文章标题: clipboard使用总结---web复制粘贴库
    本文地址:https://blog.hellozwh.com/?post=307
    版权声明:若无注明,本文皆为“起点终站”原创,转载请保留文章出处。
    BrokersSeago2017-07-19 04:21
    fx-brokers-review.com/index_pt.html Estimativa de corretores de Forex
    返回顶部| 首页| 手气不错| 网站地图| sitemap| 装逼生成器| 站长介绍|

    Copyright © 2014-2017 起点终站   闽ICP备16011094号-1

    00:00 / 00:00
    顺序播放