快捷導(dǎo)航

JS基于clipBoard.js插件實(shí)現(xiàn)剪切、復(fù)制、粘貼

更新時(shí)間：2016年05月03日 09:57:13 作者：夕陽白雪

這篇文章主要介紹了JS實(shí)現(xiàn)剪切、復(fù)制、粘貼——clipBoard.js 的相關(guān)資料,需要的朋友可以參考下

摘要：

最近做了一個(gè)項(xiàng)目，其中有這樣一需求：實(shí)現(xiàn)一個(gè)點(diǎn)擊按鈕復(fù)制鏈接的功能，通過網(wǎng)上找相關(guān)資料，找到了幾個(gè)插件，ZeroClipboard是通過flash實(shí)現(xiàn)的復(fù)制功能，隨著越來越多的提議廢除flash，于是就想能不能通過js來實(shí)現(xiàn)復(fù)制剪切呢？

地址：https://github.com/baixuexiyang/clipBoard.js

方法：

復(fù)制

var copy = new clipBoard(document.getElementById('data'), {
beforeCopy: function() {
},
copy: function() {
return document.getElementById('data').value;
},
afterCopy: function() {
}
});

剪切

var cut = new clipBoard(document.getElementById('data'), {
beforeCut: function() {
},
Cut: function() {
return document.getElementById('data').value;
},
afterCut: function() {
}
});

粘貼

var paste = new clipBoard(document.getElementById('data'), {
beforePaste: function() {
},
paste: function() {
return document.getElementById('data').value;
},
afterPaste: function() {
}
});

補(bǔ)充

1.引入clipboard.min.js文件
2.定義一個(gè)button按鈕，注意按鈕的屬性：data-clipboard-action="copy" 表示是復(fù)制行為，data-clipboard-text=‘XXX'，XXX表示你要復(fù)制的內(nèi)容
3.書寫js,建立clipboard對(duì)象以及復(fù)制后執(zhí)行的方法

演示代碼如下：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>target-div</title>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/2.0.0/clipboard.min.js"></script>
</head>
<body>
	<button class="btn" data-clipboard-text="Just because you can doesn't mean you should — clipboard.js">
  Copy to clipboard
</button>
<button class="btn" data-clipboard-text="ean you should — clipboard.js">
  Copy to clipboard2
</button>
  
  <script>
 
    var clipboard = new ClipboardJS('.btn');
    clipboard.on('success', function(e) {
      console.info('Action:', e.action);
      console.info('Text:', e.text);
      console.info('Trigger:', e.trigger);
      alert('復(fù)制成功，您復(fù)制的鏈接為'+e.text);
      e.clearSelection();
    });
 
    clipboard.on('error', function(e) {
      console.error('Action:', e.action);
      console.error('Trigger:', e.trigger);
      alert('復(fù)制失敗')
    });
		
  </script>
</body>
</html>

最近在做項(xiàng)目的時(shí)候需要實(shí)現(xiàn)復(fù)制黏貼的功能，但是js自己提供的各種方法存在兼容性問題，最后決定使用插件來實(shí)現(xiàn)，找了很多插件，發(fā)現(xiàn)了了一款比較好用的，分享給大家

您可能感興趣的文章: