js實(shí)現(xiàn)復(fù)制功能

• 一、具體場景
• 二、實(shí)現(xiàn)方式
• • 1. document.execCommand
  • • （1）具體實(shí)現(xiàn)
    • （2）方法特點(diǎn)
  • 2.navigator.clipboard.writeText
  • • （1）具體實(shí)現(xiàn)
    • （2）方法特點(diǎn)
  • 3.其他插件

一、具體場景

前端有時(shí)需要實(shí)現(xiàn)點(diǎn)擊按鈕復(fù)制的功能，這個(gè)時(shí)候就不能讓用戶去手動(dòng)選擇內(nèi)容右鍵復(fù)制了。

二、實(shí)現(xiàn)方式

1. document.execCommand

（1）具體實(shí)現(xiàn)

復(fù)制時(shí)，先選中文本，然后調(diào)用document.execCommand(‘copy’)，選中的文本就會(huì)進(jìn)入剪貼板。這就需要借助輸入框來實(shí)現(xiàn)對文本的選中。
具體案例：

<button type="button" onclick="theCopy()">復(fù)制</button><label style="display: block"><textarea id="textArea">哈哈哈哈哈哈哈哈哈111111</textarea></label> function theCopy() {let textArea = document.getElementById('textArea')console.log(textArea);textArea.select()document.execCommand('copy')}

如果內(nèi)容不在輸入框中，我們可以借助一個(gè)透明的輸入框來實(shí)現(xiàn)

<button type="button" onclick="theCopy()">復(fù)制</button><p id="text">哈哈哈哈哈哈哈哈哈111111</p><label style="display: block"><textarea id="textArea" style="opacity: 0;"></textarea></label> function theCopy() {let textArea = document.getElementById('textArea')let text = document.getElementById('text')textArea.innerText = text.innerHTMLconsole.log(textArea);textArea.select()document.execCommand('copy')}

（2）方法特點(diǎn)

execCommand向下兼容性很好

如果你需要兼容IE推薦你使用此方法
但是此方法已經(jīng)不被官方推薦使用了

所以如果不需要兼容IE，推薦使用下面的方法

2.navigator.clipboard.writeText

（1）具體實(shí)現(xiàn)

此方法是專門為剪切板提供的API，使用起來較為簡單

writeText(data: string): Promise<void>;

它是一個(gè)promise函數(shù)，所以可以使用成功或失敗的回調(diào)（復(fù)制成功或失敗給提示）
代碼實(shí)現(xiàn)：

<button onclick="copy()">復(fù)制</button> function copy() {navigator && navigator.clipboard && navigator.clipboard.writeText('11111').then(res => {console.log(res);}).catch(err=> {})}

（2）方法特點(diǎn)

注：因?yàn)榘踩矫娴膯栴}，navigator.clipboard API僅僅支持在locallhost和支持https協(xié)議的網(wǎng)站使用，如果你的項(xiàng)目部署的線上網(wǎng)址不是https協(xié)議的，請務(wù)必做好兼容問題
writeText是一個(gè)’比較新’的API，兼容性不是那么好（不兼容IE）

但是他是官方推薦的API，如果不用兼容，推薦大家使用此API

3.其他插件

如果是vue的話可以使用也可以使用 vue-clipboards 完成復(fù)制等操作，或者也可以直接使用clipboard.js，具體實(shí)現(xiàn)方式各位可以自行去了解。

總結(jié)

以上是生活随笔為你收集整理的js实现复制功能的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。