js自動識別複製來的信息,js自動識別複製來的信息內容

本文目錄一覽：

• 1、JS實現內容複製功能
• 2、asp中複製一段文字到textarea，自動識別對應input的內容，分別填入其中，有誰可以用js做到啊！？？？
• 3、JS自動複製內容到剪貼板
• 4、如何利用JS實現複製/粘貼功能
• 5、js 複製文字功能
• 6、如何在頁面載入後調用js的代碼自動複製一段文字

JS實現內容複製功能

複製是一個使用頻率特別高的操作，在網頁中，一般可以選中要複製的內容，使用快捷鍵 ctrl+c 將內容複製到剪貼板。除了使用系統提供的快捷方式複製網頁內容，我們還可以用JS實現複製，這得益於document的 execCommand(‘copy’) 命令。

實現整個複製功能，需要以下三個步驟：

大部分HTML元素都有innerText和innerHTML兩個屬性，innerText屬性返迴文本內容，innerHTML屬性返回標籤元素。我們可以創建一個函數，用於獲取需要返回的內容：

上面的selectText函數接收一個DOM元素，返回DOM元素的innerText屬性值。

我們可以通過表單元素的select()方法選中內容，表單元素因為textarea限制少於input，所以推薦使用textarea。我們可以動態創建一個textarea元素，將textarea的value屬性值設置為上面的innerText屬性值，再執行textarea的select方法選中。

上面實現了選中，下面就可以實現複製功能了。

最後一步就可以用execCommand(‘copy’)實現複製了，它可以複製瀏覽器中選中的文本，比如說上面被textarea選中的文本，複製之後記得移除textarea。

第二步和第三步可以優化一下，創建一個copy函數，函數參數設置為第一步需要複製的文本，返回值為複製的結果。

完整JS示例如下：

可以將上面的完整JS示例寫入一個JS文件，將JS文件引入HTML中，通過JS點擊事件來執行複製函數。

效果圖：

asp中複製一段文字到textarea，自動識別對應input的內容，分別填入其中，有誰可以用js做到啊！？？？

先將textarea每行內容分離出來,然後根據冒號左邊的內容遍歷下面的表格找到對應名稱的input輸入冒號後面的內容.

JS自動複製內容到剪貼板

javascript代碼

SCRIPT LANGUAGE=”JavaScript”

function copyText(text)

{

window.clipboardData.setData(“text”,text);

}

/SCRIPT

HTML代碼

body onload=copyText(‘123’)

/body

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

    }

如何在頁面載入後調用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方法」的文字鏈，即可成功彈出提示。