原生 js 實現點選按鈕複製文字
阿新 • • 發佈:2021-01-20
最近遇到一個需求,需要點選按鈕,複製 <p> 標籤中的文字到剪下板
之前做過複製輸入框的內容,原以為差不多,結果發現根本行不通
嘗試了各種辦法,最後使了個障眼法,實現了下面的效果
一、原理分析
瀏覽器提供了 copy 命令 ,可以複製選中的內容
document.execCommand("copy")
如果是輸入框,可以通過select()方法,選中輸入框的文字,然後呼叫 copy 命令,將文字複製到剪下板
但是 select() 方法只對 <input> 和 <textarea> 有效,對於 <p> 就不好使
最後我的解決方案是,在頁面中新增一個 <textarea>,然後把它隱藏掉
點選按鈕的時候,先把 <textarea> 的 value 改為 <p> 的 innerText,然後複製 <textarea> 中的內容
二、程式碼實現
HTML 部分
<style type="text/css"> .wrapper {position: relative;} #input {position: absolute;top: 0;left: 0;opacity: 0;z-index: -10;} </style> <div class="wrapper"> <p id="text">我把你當兄弟你卻想著複製我?</p> <textarea id="input">這是幕後黑手</textarea> <button onclick="copyText()">copy</button> </div>
JS 部分
<script type="text/javascript"> function copyText() { var text = document.getElementById("text").innerText; var input = document.getElementById("input"); input.value = text; // 修改文字框的內容 input.select(); // 選中文字 document.execCommand("copy"); // 執行瀏覽器複製命令 alert("複製成功"); } </script>
親測,Firefox 48.0,Chrome 60.0,IE 8 都能用
三、一鍵複製
分享一個自己工作中用到的一鍵複製方法
/** * 一鍵貼上 * @param {String} id [需要貼上的內容] * @param {String} attr [需要 copy 的屬性,預設是 innerText,主要用途例如賦值 a 標籤上的 href 連結] * * range + selection * * 1.建立一個 range * 2.把內容放入 range * 3.把 range 放入 selection * * 注意:引數 attr 不能是自定義屬性 * 注意:對於 user-select: none 的元素無效 * 注意:當 id 為 false 且 attr 不會空,會直接複製 attr 的內容 */ copy (id, attr) { let target = null; if (attr) { target = document.createElement('div'); target.id = 'tempTarget'; target.style.opacity = '0'; if (id) { let curNode = document.querySelector('#' + id); target.innerText = curNode[attr]; } else { target.innerText = attr; } document.body.appendChild(target); } else { target = document.querySelector('#' + id); } try { let range = document.createRange(); range.selectNode(target); window.getSelection().removeAllRanges(); window.getSelection().addRange(range); document.execCommand('copy'); window.getSelection().removeAllRanges(); console.log('複製成功') } catch (e) { console.log('複製失敗') } if (attr) { // remove temp target target.parentElement.removeChild(target); } }轉載:https://www.cnblogs.com/wisewrong/p/7473978.html