四種實(shí)現(xiàn)剪貼板的操作
- 原生
document.execCommand()方法 - 異步的 Clipboard API
-
copy事件和paste事件 - 第三方庫 clipboard.js
前三個的詳細(xì)內(nèi)容可以查閱阮一峰老師的剪貼板操作 Clipboard API 教程。我們來看看第四種使用 clipboard.js 庫簡化原生操作。
第三方庫 Clipboard.js
首先，在我們的項(xiàng)目中使用 NPM 引入 clipboard：
$ npm i clipboard
或者使用 CDN：
<script src="https://cdn.jsdelivr.net/npm/clipboard@2.0.10/dist/clipboard.min.js"></script>
Clipboard.js 的文檔已經(jīng)很全面了，以下是一些簡單的實(shí)例。
復(fù)制文本
通過 data-clipboard-target 綁定相對應(yīng)的 id 進(jìn)行匹配：
<!-- Target -->
<input id="foo" value="https://github.com/zenorocha/clipboard.js.git">
<!-- Trigger -->
<button class="btn" data-clipboard-target="#foo">
<img src="assets/clippy.svg" alt="Copy to clipboard">
</button>
更簡便的方法是，使用 data-clipboard-text 屬性設(shè)置您想包含的內(nèi)容即可。
<button class="btn" data-clipboard-text="Copy to Clipboard"></button>
剪切文本
定義 data-clipboard-action 屬性，以指定是要 copy 還是 cut 內(nèi)容。
<button class="btn" data-clipboard-action="cut" data-clipboard-target="#foo">
Cut to clipboard
</button>
注意：
cut操作僅適用于<input>或<textarea>元素。
事件
success 和 error 讓您監(jiān)聽和實(shí)現(xiàn)您的自定義邏輯。
const clipboard = new ClipboardJS('.btn')
clipboard.on('success', e => {
console.info('Action:', e.action)
console.info('Text:', e.text)
console.info('Trigger:', e.trigger)
e.clearSelection()
})
clipboard.on('error', e => {
console.error('Action:', e.action)
console.error('Trigger:', e.trigger)
})
還有一些高級選項(xiàng)，詳細(xì)見文檔。
示例：添加著作權(quán)
我們在很多知識分享平臺都可以看到，當(dāng)我們復(fù)制一段超過一定字?jǐn)?shù)的內(nèi)容時，會在您復(fù)制的內(nèi)容最后追加上一段標(biāo)注：
作者：xxx
鏈接：xxx
來源：xxx
著作權(quán)歸作者所有。商業(yè)轉(zhuǎn)載請聯(lián)系作者獲得授權(quán)，非商業(yè)轉(zhuǎn)載請注明出處。`
我們使用 copy 事件來實(shí)現(xiàn)（這里不對復(fù)制多少字?jǐn)?shù)做判斷）：
document.addEventListener('copy', e => {
const selection = document.getSelection()
const ct = `作者：lio
鏈接：http://www.itdecent.cn
來源：簡書
著作權(quán)歸作者所有。商業(yè)轉(zhuǎn)載請聯(lián)系作者獲得授權(quán)，非商業(yè)轉(zhuǎn)載請注明出處。`
e.clipboardData.setData('text/plain', selection.toString() + '\n' + ct)
e.preventDefault()
})
復(fù)制這段代碼到控制臺，試著隨意復(fù)制一段文本到其他地方。
嘗試著，使用其他以上所講述的任何方法，來修改這個示例，以加深印象。
