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

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

讓客戶滿意是我們工作的目標(biāo)，不斷超越客戶的期望值來自于我們對這個行業(yè)的熱愛。我們立志把好的技術(shù)通過有效、簡單的方式提供給客戶，將通過不懈努力成為客戶在信息化領(lǐng)域值得信任、有價值的長期合作伙伴，公司提供的服務(wù)項目有：國際域名空間、雅安服務(wù)器托管、營銷軟件、網(wǎng)站建設(shè)、吉水網(wǎng)站維護、網(wǎng)站推廣。

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

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

一、原理分析

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

document.execCommand("copy")

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

但是 select() 方法只對 和 有效，對于 <p> 就不好使</p><p>最后我的解決方案是，在頁面中添加一個 <textarea>，然后把它隱藏掉</p><p><strong>點擊按鈕的時候，先把 <textarea> 的 value 改為 <p> 的 innerText，然后復(fù)制 <textarea> 中的內(nèi)容 </strong></p><p><strong>二、代碼實現(xiàn)</strong></p><p>HTML 部分</p><div><pre><style type="text/css"> .wrapper {position: relative;} #input {position: absolute;top: 0;left: 0;opacity: 0;z-index: -10;} </style> <div id="squ6kqw" class="wrapper"> <p id="text">我把你當(dāng)兄弟你卻想著復(fù)制我？</p> <textarea id="input">這是幕后黑手 copy