卡卡網

前文介紹過文本復制的實現方法，無需JS插件，代碼也比較簡少，不過其對IE瀏覽器的支持不好。今天，我特地找了一個支持各種瀏覽器的文本復制實現方法，是利用第三方JS插件來實現的，該插件是clipboard.js。

支持瀏覽器

安裝

你可以在 npm 上得到它。

npm install clipboard --save

或者，如果你不熟悉包管理，只需下載一個RAR文件。

下載

clipboard.min.js

設置

首先，包含位于文件夾中的腳本加載它。

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

現在，你需要通過傳遞 DOM 選擇器、HTML 元素或HTML 元素列表來實例化它。

new ClipboardJS('.btn');

用法

強烈建議利用HTML5數據屬性來提高可用性。

從另一個元素復制文本

一個非常常見的用例是從另一個元素復制內容。你可以通過data-clipboard-target在觸發(fā)器元素中添加一個屬性來做到這一點。

你在此屬性中包含的值需要與另一個元素選擇器匹配。

demodownload

demodownload

從另一個元素剪切文本

此外，你可以定義一個data-clipboard-action屬性來指定是否要copy或cut內容。

如果省略此屬性，默認使用copy。 

demodownload

該cut操作僅適用于<input>或<textarea>元素。

從屬性復制文本

事實是，你甚至不需要另一個元素來復制其內容。你可以在觸發(fā)器元素中包含一個data-clipboard-text屬性。

demodownload

通過傳遞HTML元素列表實例化剪貼板

demodownload

通過傳遞字符串選擇器實例化剪貼板

demodownload

在函數里定義復制選擇器

<!-- 1. 定義一些標記 -->
<button class="btn">Copy</button>
<div>hello</div>
<!-- 2. 包含庫文件 -->
<script src="clipboard.min.js"></script>
<!-- 3. 初始化剪切板 -->
<script>
  var clipboard = new ClipboardJS('.btn', {
     target: function () {
        return document.querySelector('div'); /* 定義復制選擇器 */
     },
  });

  clipboard.on('success', function (e) {
     console.log(e);
  });

  clipboard.on('error', function (e) {
     console.log(e);
  });
</script>

demodownload

把要復制的文本寫在函數里

<!-- 1. 定義一些標記 -->
<button class="btn">Copy</button>
<!-- 2. 包含庫文件 -->
<script src="clipboard.min.js"></script>
<!-- 3. 初始化剪切板 -->
<script>    
  var clipboard = new ClipboardJS('.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>

demodownload

演示

• target-input.html
• target-div.html
• target-textarea.html
• constructor-node.html
• constructor-nodelist.html
• constructor-selector.html
• function-target.html
• function-text.html

標簽: clipboard.js  復制文字  復制  copy  copyToClipboard