js復制文本到剪貼板

㈠ js實現內容復制功能

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

實現整個復制功能，需要以下三個步驟：

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

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

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

上面實現了選中，下面就可以實現復制功能了。

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

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

完整JS示例如下：

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

效果圖：

㈡ JavaScript如何點擊實現復制文字到剪切板呢

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

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

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

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

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

如上例，點擊按鈕後會將input的值「被復制的內容」幾個字復制到剪切板中。

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

㈢ js將內容放到剪貼板怎麼寫呢

<input type="text" id="Text" value="" style="color:#fff; background:#fff; border-color:#fff;border: 0; position:absolute; top:-50px; left:0;" />
<script type="text/jscript">
//復制文本
function Text(str)
{
if(str.length >0)
{
$("#Text").val(str);
//復制文本
var input = document.getElementById("Text");
input.value = str; // 修改文本框的內容
input.select(); // 選中文本
document.execCommand(""); // 執行瀏覽器復制命令
//layer提示框
layer.closeAll('msg',{time:10000});
layer.msg('<span style="color:red;">已復制：</span></br>'+str);
}
}
</script>
<a href="jscript:Text('要復制的內容')">要復制的內容</a>
這是代碼，這里的文本框不能設置隱藏，否則復制失效，所以我設置的樣式讓它在瀏覽器之外的地方，無法被看到