js點擊自動複製文本代碼,js點擊自動複製文本代碼

本文目錄一覽：

• 1、如何利用JS實現複製/粘貼功能
• 2、js 複製文字功能
• 3、求單擊“複製內容到剪切板”能複製文本框裡面內容的代碼！
• 4、如何在頁面加載後調用js的代碼自動複製一段文字

如何利用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’);

    }

求單擊“複製內容到剪切板”能複製文本框裡面內容的代碼！

我們舉例來說明吧，這樣一眼就能看明白了！

比如我們要複製一個類型為“text”的input裡面的內容，它的ID為wanto，如下面一行代碼所示：

input id=”wanto” type=”text” /

而下面這行代碼呢是一個按鈕，當我們點擊這個按鈕後就會把“wanto”裡面的內容給複製到剪貼板裡面去，我們重點來看看它的onclick這個javascript事件吧！

input type=”button” value=”複製” onclick=”clipboardData.setData(‘Text’,document.getElementById(‘wanto’).value);” /

這個onclick的事件處理函數就是把“wanto”裡面的內容給複製到剪切板了，這個時候我們不管是用“Ctrl+V”的組合鍵還是用“右鍵”-“粘貼”都可以把剪切板裡面的內容給倒出來了。簡單吧·這裡的例子是複製類型為“text”的內容，其他諸如area等都是一樣的。

如何在頁面加載後調用js的代碼自動複製一段文字

1、首先建立一個父級頁面parent.html,代碼如圖，一個pop函數方法，一個鏈接到child.html的iframe標籤。

2、再新建一個child.html頁面，如圖，展示一個id=link的div標籤，和link的點擊事件，因為是調用父級方法，所以需要用到window.parent.pop()方法。

3、預覽頁面，可明顯看到parent.html裡面的iframe框架，指向的就是child子頁面。

4、點擊頁面中“調用父級pop方法”的文字鏈，會提示錯誤，這是因為沒配置好域名等相關設置。

5、打開iis，右鍵iframe文件夾——“管理文件夾”——“瀏覽”；即可打開本地測試地址；（如小夥伴沒配置iis，需要先配置iis建立站點）。

6、再次點擊“調用父級pop方法”的文字鏈，即可成功彈出提示。