js複製內容到剪貼板代碼（全部內容複製到剪貼板中）

本文目錄一覽：

• 1、JavaScript如何點擊實現複製文字到剪切板
• 2、如何自動選定一個網頁顯示的全部內容到複製到剪貼板中？
• 3、如何用JS操作粘貼板

JavaScript如何點擊實現複製文字到剪切板

可以使用clipboard插件解決這個問題。

github里直接搜索clipboard就可以找到了。

該插件並不依賴jquery。直接引入即可使用。

使用方法：

input id=”foo” value=”被複制的內容”

button class=”btn” data-clipboard-target=”#foo”點擊複製/button

new Clipboard(‘.btn’);

這裡的.btn是元素的class屬性，可以使用任意id或者class以及元素節點名稱來實例化插件。

默認會為元素綁定click事件，點擊的時候會觸發。

data-clipboard-target參數指定被複制內容的元素。

如上例，點擊按鈕後會將input的值“被複制的內容”幾個字複製到剪切板中。

更多使用方法可以自行github查詢。

如何自動選定一個網頁顯示的全部內容到複製到剪貼板中？

可以使用開發者工具中的控制台來運行以下的js代碼：

if(confirm(“你確定要複製整個頁面的文字么？”))navigator.clipboard.writeText(document.body.innerText);

將代碼複製到控制台然後回車，頁面就會彈出一個確認框，點擊確認之後就會將頁面上的文字複製到剪貼板了。

如何用JS操作粘貼板

主要是用到了 window.clipboardData.setData(“Text”,copyText);

他主要有兩個參數：第一個是設置要複製的是一段文本，第二個參數是要複製具體的內容，這個內容可以從文本框中或使用innerHTML獲取。

簡單的實例代碼：

複製代碼 代碼如下:

script type=”text/javascript”

function copyData() {

var copyText = document.getElementById(“ctl00_cpRight_txtUrl”).value;

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

}

/script

asp:TextBox ID=”txtUrl” runat=”server” Height=”30px” Width=”349px”/asp:TextBox

input id=”btnCopyUrl” type=”button” value=”複製URL到粘貼板” onclick=”copyData()” /

註：ctl00_cpRight_txtUrl這個ID其實是txtUrl生成頁面後自動生成的ID。