最近遇到一個(gè)需求，需要點(diǎn)擊按鈕，復(fù)制

標(biāo)簽中的文本到剪切板

之前做過(guò)復(fù)制輸入框的內(nèi)容，原以為差不多，結(jié)果發(fā)現(xiàn)根本行不通

嘗試了各種辦法，最后使了個(gè)障眼法，實(shí)現(xiàn)了下面的效果

一、原理分析

瀏覽器提供了 copy 命令 ，可以復(fù)制選中的內(nèi)容

document.execCommand("copy")

如果是輸入框，可以通過(guò) select()方法，選中輸入框的文本，然后調(diào)用? copy 命令，將文本復(fù)制到剪切板

但是 select() 方法只對(duì) 和 有效，對(duì)于

就不好使

最后我的解決方案是，在頁(yè)面中添加一個(gè) ，然后把它隱藏掉

點(diǎn)擊按鈕的時(shí)候，先把 的 value 改為

的 innerText，然后復(fù)制 中的內(nèi)容

二、代碼實(shí)現(xiàn)

HTML 部分

.wrapper {position: relative;}

#input {position: absolute;top: 0;left: 0;opacity: 0;z-index: -10;}

我把你當(dāng)兄弟你卻想著復(fù)制我？

這是幕后黑手

copy

JS 部分

function copyText() {

var text = document.getElementById("text").innerText;

var input = document.getElementById("input");

input.value = text; // 修改文本框的內(nèi)容

input.select(); // 選中文本

document.execCommand("copy"); // 執(zhí)行瀏覽器復(fù)制命令

alert("復(fù)制成功");

}

親測(cè)，Firefox 48.0，Chrome 60.0，IE 8 都能用

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

總結(jié)

以上是生活随笔為你收集整理的html 复制文本按钮,js实现点击按钮复制文本功能的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。