使用Javascript實現(xiàn)復制粘貼功能的示例代碼

更新時間：2023年09月21日 09:51:53 作者：優(yōu)秀穩(wěn)妥的Zn

本篇文章記錄如何通過js代碼實現(xiàn)復制內容到剪切板,之后可以粘貼到需要的地方的功能,文中通過代碼示例介紹的非常詳細,對大家的學習或工作有一定的幫助,需要的朋友可以參考下

背景

本篇文章記錄如何通過js代碼實現(xiàn)復制內容到剪切板，之后可以粘貼到需要的地方的功能。

分為兩個部分內容：

前兩個部分使用execCommand方法，該方法現(xiàn)在被棄用(ps：雖然也還可以用就行了), 且對于單行內容的復制需要結合input標簽實現(xiàn)，多行內容的復制需要結合textarea標簽實現(xiàn)。

第三個部分，則是現(xiàn)在使用Clipboard API來實現(xiàn)單行或多行內容的復制。(推薦方法)

1、execCommand方法

該方法是在document對象下的方法，現(xiàn)已被棄用，但在這里考慮到以前已經(jīng)使用過這樣的方法實現(xiàn)復制功能了，也寫在這里，現(xiàn)在仍然可用。

單行復制

通過input標簽將需要復制的內容傳遞給value屬性，之后通過document對象下execCommand方法執(zhí)行復制功能即可。

具體實現(xiàn)如下：

handleCopy() {
  let copy_text = '需要復制的內容';//拿到想要復制的值
  let input_dom = document.createElement('input');//創(chuàng)建input元素
  input_dom.value = copy_text;//添加需要復制的內容到value屬性
  document.body.appendChild(input_dom);//向頁面底部追加輸入框
  input_dom.select();//選擇input元素
  document.execCommand("Copy");//執(zhí)行復制命令
  alert("復制成功！");//彈出提示信息，不同組件可能存在寫法不同
  //復制之后再刪除元素，否則無法成功賦值
  input_dom.remove();//刪除動態(tài)創(chuàng)建的節(jié)點
},

上面的方法在頁面需要觸發(fā)復制功能的時候添加到對應鼠標事件即可。

多行復制

通過textarea標簽將需要復制的內容傳遞給value屬性，并在需要換行的內容后面加入換行符\r\n，之后通過document對象下execCommand方法執(zhí)行復制功能即可。

具體實現(xiàn)如下：

handleCopy() {
  let copy_text = '第一行需要復制的內容\r\n第二行需要復制的內容';//拿到想要復制的值
  let textarea_dom = document.createElement('textarea');//創(chuàng)建textarea元素
  document.body.appendChild(textarea_dom);//向頁面底部追加輸入框
  textarea_dom.value = copy_text; //添加需要復制的內容到value屬性
  textarea_dom.select();//選擇input元素
  document.execCommand("Copy");//執(zhí)行復制命令
  alert("復制成功！");//彈出提示信息，不同組件可能存在寫法不同
  //復制之后再刪除元素，否則無法成功賦值
  document.body.removeChild(textarea_dom); //刪除動態(tài)創(chuàng)建的節(jié)點
}

上面的方法在頁面需要觸發(fā)復制功能的時候添加到對應鼠標事件即可。

2、Clipboard API（推薦）

Clipboard API中的 navigator.clipboard.writeText 方法可以更加簡單的實現(xiàn)單行和多行的內容復制，而且該方法會返回一個Promise對象，可以幫助我們簡單處理復制成功或復制失敗后需要執(zhí)行的內容。

具體實現(xiàn)如下：

handleCopy() {
  let copy_text = '第一行需要復制的內容\r\n第二行需要復制的內容';//拿到想要復制的值
  // 使用Clipboard API復制文本到剪貼板中
  navigator.clipboard.writeText(copy_text).then(() => {
    alert("復制成功！")
  }).catch((err)=>{
    alert("復制失?。?)
  })
}

上面的方法在頁面需要觸發(fā)復制功能的時候添加到對應鼠標事件即可，且在復制內容中，直接支持換行符的實現(xiàn)。

注意：

上面的navigator.clipboard.writeText方法只有在游覽器的navigator對象下才會存在clipboard對象；如果你是在vue，react等前端框架中像上面的方法調用clipboard對象，是不存在的。

因為在這類前端框架中編寫js的環(huán)境下的navigator對象并沒有提供clipboard對象，而且clipboard對象并不是navigator對象的標準屬性或方法。

因此，在這類框架中需要使用Clipboard API需要通過第三方依賴的方法去實現(xiàn)。

下面以常見的vue框架中使用Clipboard API為例：

1、首先按照第三方Clipboard依賴

npm install clipboard --save

2、在頁面文件中引入或在main.js全局引入

import Clipboard from 'clipboard'

3、在需要實現(xiàn)復制功能的方法中，寫入實現(xiàn)

<template>
	<div>
    <div class="copy_dom" @click="handleCopy"></div>
  </div>
</template>
<script>
import Clipboard from 'clipboard';
export default {
  data: {
    clipboard: null
  }
  methods: {
  	handleCopy() {
      // 傳遞事件綁定的元素class名和需要復制的內容text，創(chuàng)建Clipboard實例 
	  this.clipboard = new Clipboard('.copy_dom', {
        text: () => {
          return '第一行需要復制的內容\r\n第二行需要復制的內容'
        }
      });
      // 復制成功后的回調函數(shù)
      this.clipboard.on('success', () => {
        // 釋放內存，非常重要，不然會重復觸發(fā)回調函數(shù)
		this.clipboard.destroy();
        console.log('復制成功！');
      })
     	// 復制失敗后的回調函數(shù)
      this.clipboard.on('error', function(e) {
        console.log('復制失??！');
      })
		}
  },
  //beforeDestroy() {
  //  this.clipboard.destroy(); //組件頁面銷毀時，需要手動清理clipboard，釋放內存
  //}
}
</script>

上面的代碼中，clipboard實例在復制成功后，建議在success的回調函數(shù)中執(zhí)行實例銷毀的destroy方法；也可以在頁面組件關閉后的beforeDestroy生命周期執(zhí)行銷毀方法。

以上就是使用Javascript實現(xiàn)復制粘貼功能的示例代碼的詳細內容，更多關于Javascript復制粘貼功能的資料請關注腳本之家其它相關文章！

您可能感興趣的文章: