js實現複製,js一鍵複製代碼

本文目錄一覽：

• 1、JS原生 複製粘貼
• 2、js複製數組
• 3、JS中實現深度拷貝，複製一個對象
• 4、如何利用JS實現複製/粘貼功能
• 5、js 複製文字功能

JS原生 複製粘貼

本篇文章不考慮瀏覽器兼容，谷歌瀏覽器親測至少得88版本往上。Mac系統複製粘貼html數據，會自動加一些標籤，小夥伴們自己測吧。一般需求用不着。

想要實現複製粘貼就只需要搞明白兩件事就可以了。

第一就是如何往粘貼板裡邊存放數據，第二就是如何讀取粘貼板裡邊的數據。

所操作的數據大致可以分為三類數據 1：字符串 2：帶樣式的HTML 3：圖片 還有其他數據格式，還請各位小夥伴補充指教吧。

① 如果只是放普通字符串是最簡單的

② 想要放入帶格式的數據，比如想要往word內粘貼一個表格，跟正常寫html標籤加寫樣式是一樣的

③往粘貼板內放入圖片,目前只支持放png圖片

其實也可以用放HTML的方式，把圖片放入粘貼板內

js複製數組

一、 錯誤實現

var array1 = new Array(“1″,”2″,”3”); 

var array2; 

array2 = array1; 

array1.length = 0; 

alert(array2); //返回為空

這種做法是錯的，因為javascript分原始類型與引用類型（與java、c#類似）。Array是引用類

型。array2得到的是引用，所以對array1的修改會影響到array2。

二、 使用slice()

可使用slice()進行複製，因為slice()返回也是數組。

var array1 = new Array(“1″,”2″,”3”); 

var array2; 

array2 = array1.slice(0); 

array1.length = 0; 

alert(array2); //返回1、2、3 

三、 使用concat()

注意concat()返回的並不是調用函數的Array，而是一個新的Array，所以可以利用這一點進行複製。

var array1 = new Array(“1″,”2″,”3”); 

var array2; 

array2 = array1.concat(); 

array1.length = 0; 

alert(array2); //返回1、2、3 

JS中實現深度拷貝，複製一個對象

在JS中拷貝、複製一個對象的方式有多種，我常用的一般是 Object.assign({},sourceObj)。

Object.assign()因為 Object.assign()拷貝的是屬性值。假如源對象的屬性值是一個對象的引用，那麼它也只指向那個引用。如果合併的對象是多層嵌套對象那就屬於淺拷貝了，修改內層對象的值還是會影響原對象。

要想實現深度複製可以使用JSON方式。

寫法如下：

它的原理是把JS對象轉換為JSON字符串，再由JSON字符串轉換為JS對象，這樣新對象的指針就不會指向原對象的指針了。但這種也有副作用的，有一下幾點副作用：

1、有屬性包含時間對象，拷貝後就是字符串的形式。

2、有函數或undefined，拷貝後會丟失。

3、有RegExp和Error對象，拷貝後變為空對象。

4、存在循環引用的情況，沒法正確拷貝。

5、內層對象是構造函數生成的，會丟失constructor。

6、屬性值為NaN、Infinity，拷貝後變為null。

雖然有些副作用，但大多情況還是符合要求可以使用。

如何利用JS實現複製/粘貼功能

1、最基本的複製

Java代碼

script language=”JavaScript”

function readTxt()

{

alert(window.clipboardData.getData(“text”));

}

function setTxt()

{

var t=document.getElementById(“txt”);

t.select();

window.clipboardData.setData(‘text’,t.createTextRange().text);

}

/script

input name=”txt” value=”測試”

input type=”button” value=”複製” onclick=”setTxt()”

input type=”button” value=”讀取” onclick=”readTxt()”

2、擴展複製：複製表格

Java代碼

INPUT TYPE=”button” value=”選中測試表格” onclick=”CopyTable()”

測試

TABLE border=”1″ id=”oTable”

TR

TD測試表格/TD

TD測試表格/TD

/TR

TR

TD測試表格/TD

TD測試表格/TD

/TR

/TABLE文字

SCRIPT LANGUAGE=”JavaScript”

!–

function CopyTable()

{

var txt = document.body.createTextRange();

txt.moveToElementText(document.getElementById(‘oTable’));

txt.select();

}

//–

/SCRIPT

、兼容IE，firefox等瀏覽器的複製

Java代碼

script

function copyToClipboard(txt) {

if(window.clipboardData) {

window.clipboardData.clearData();

window.clipboardData.setData(“Text”, txt);

} else if(navigator.userAgent.indexOf(“Opera”) != -1) {

window.location = txt;

} else if (window.netscape) {

try {

netscape.security.PrivilegeManager.enablePrivilege(“UniversalXPConnect”);

} catch (e) {

alert(“被瀏覽器拒絕！\n請在瀏覽器地址欄輸入’about:config’並回車\n然後將’signed.applets.codebase_principal_support’設置為’true'”);

}

var clip = Components.classes[‘@mozilla.org/widget/clipboard;1’].createInstance(Components.interfaces.nsIClipboard);

if (!clip)

return;

var trans = Components.classes[‘@mozilla.org/widget/transferable;1’].createInstance(Components.interfaces.nsITransferable);

if (!trans)

return;

trans.addDataFlavor(‘text/unicode’);

var str = new Object();

var len = new Object();

var str = Components.classes[“@mozilla.org/supports-string;1”].createInstance(Components.interfaces.nsISupportsString);

var copytext = txt;

str.data = copytext;

trans.setTransferData(“text/unicode”,str,copytext.length*2);

var clipid = Components.interfaces.nsIClipboard;

if (!clip)

return false;

clip.setData(trans,null,clipid.kGlobalClipboard);

}

}

/script

button onclick=”copyToClipboard(‘你好！’);”複製文本「你好！」/button

textarea id=”test”/textarea

js 複製文字功能

功能 ：點擊按鈕，複製值。

實現方法 ：通過原生js 的方法 document.execCommand(‘copy’)

巨坑 ：document.execCommand(『copy』)不生效

原因 ：

    1.input框不能有disabled屬性

    2.根據第一條擴展，input的width || height 不能為0；

    3.input框不能有hidden、display:none屬性

解決方案 ：在不改變原需求的情況下，新增一個input框，然後設置 opacity:0; 實現不可見， position:absolute; 脫離文檔流解決占空間的問題

語法：

document.execCommand(aCommandName,aShowDefaultUI,aValueArgument)，返回值Boolean 如果返回false 則表示還不能支持；

參數說明：

1.aCommandName

        命令的名稱：常用的為”copy”，”cut”等；

                註：「copy」 拷貝當前選中內容到剪貼板

                        「cut」  剪貼當前選中的文字並複製到剪貼板

2.aShowDefaultUI

        是否展示用戶界面，一般為 false；

3.aValueArgument

      默認為null，

示例

!– html —

        !– 點擊複製輸入框value值 —

        input type=”text” id=”copyVal” value=”被複制的內容” /

        !– 點擊複製div標籤的innerHTML —

        div id=”copyInner”被複制的內容/div

        button onclick=”myCopy”點擊複製/button

// 方法一：點擊按鈕複製文本框內容

    function myCopy(){

        var copyVal = document.getElementById(‘copyVal’);

        copyVal.select();

        document.execCommand(‘copy’);

    }

    // 方法二：點擊按鈕複製div標籤內容

    function myCopy(){

        const range = document.createRange();

        range.selectNode(document.getElementById(‘copyInner’));

        const selection = window.getSelection();

        if(selection.rangeCount 0) selection.removeAllRanges();

        selection.addRange(range);

        document.execCommand(‘copy’);

    }