卡卡網(wǎng)

前文介紹過(guò)文本復(fù)制的實(shí)現(xiàn)方法，無(wú)需JS插件，代碼也比較簡(jiǎn)少，不過(guò)其對(duì)IE瀏覽器的支持不好。今天，我特地找了一個(gè)支持各種瀏覽器的文本復(fù)制實(shí)現(xiàn)方法，是利用第三方JS插件來(lái)實(shí)現(xiàn)的，該插件是clipboard.js。

支持瀏覽器

安裝

你可以在 npm 上得到它。

npm install clipboard --save

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

下載

clipboard.min.js

設(shè)置

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

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

現(xiàn)在，你需要通過(guò)傳遞 DOM 選擇器、HTML 元素或HTML 元素列表來(lái)實(shí)例化它。

new ClipboardJS('.btn');

用法

強(qiáng)烈建議利用HTML5數(shù)據(jù)屬性來(lái)提高可用性。

從另一個(gè)元素復(fù)制文本

一個(gè)非常常見(jiàn)的用例是從另一個(gè)元素復(fù)制內(nèi)容。你可以通過(guò)data-clipboard-target在觸發(fā)器元素中添加一個(gè)屬性來(lái)做到這一點(diǎn)。

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

demodownload

demodownload

從另一個(gè)元素剪切文本

此外，你可以定義一個(gè)data-clipboard-action屬性來(lái)指定是否要copy或cut內(nèi)容。

如果省略此屬性，默認(rèn)使用copy。 

demodownload

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

從屬性復(fù)制文本

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

demodownload

通過(guò)傳遞HTML元素列表實(shí)例化剪貼板

demodownload

通過(guò)傳遞字符串選擇器實(shí)例化剪貼板

demodownload

在函數(shù)里定義復(fù)制選擇器

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

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

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

demodownload

把要復(fù)制的文本寫在函數(shù)里

<!-- 1. 定義一些標(biāo)記 -->
<button class="btn">Copy</button>
<!-- 2. 包含庫(kù)文件 -->
<script src="clipboard.min.js"></script>
<!-- 3. 初始化剪切板 -->
<script>    
  var clipboard = new ClipboardJS('.btn', {
      text: function () {
       return 'to be or not to be'; /* 要復(fù)制的文本 */
      },
  });
  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

標(biāo)簽: clipboard.js  復(fù)制文字  復(fù)制  copy  copyToClipboard