首页 > 建站教程 > JS、jQ、TS >  clipboard使用总结正文

clipboard使用总结

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

2. 使用方式
    2.1 引入js文件
        以下所有的代码都使用到以下js文件 
<script src="/web2/component/clipboard/1.6.1/clipboard.js"></script>
        clipboard复印内容的方式有
        - 从target复印目标内容
        - 通过function 要复印的内容
        - 通过属性返回复印的内容

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

    input
        data-clipboard-target指向复印节点，这里指input的目标id
        data-clipboard-action这里使用copy，同时也可以使用cut，则点击按钮后，内容里的值被剪切。如果没有指定，则默认值是copy。cut只能在input和textare中起作用 
<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);
});
    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>
3. 下载地址:
    点击下载：clipboard.js
TAGS: clipboard.js