<em>Mac</em>Book项目 2009年学校开始实施<em>Mac</em>Book项目,所有师生配备一本<em>Mac</em>Book,并同步更新了校园无线网络。学校每周进行电脑技术更新,每月发送技术支持资料,极大改变了教学及学习方式。因此2011
2021-06-01 09:32:01
原生js實現點選按鈕複製文字,供大家參考,具體內容如下
最近遇到一個需求,需要點選按鈕,複製 聊天記錄的文字到剪下板
瀏覽器提供了 copy 命令 ,可以複製選中的內容
document.execCommand("copy")
如果是輸入框,可以通過 select() 方法,選中輸入框的文字,然後呼叫 copy 命令,將文字複製到剪下板
但是 select() 方法只對 和 有效,對於就不好使
最後我的解決方案是,在頁面中新增一個 ,然後把它隱藏掉點選按鈕的時候,先把 的 value 改為的 innerText,然後複製 中的內容
<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>
<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("複製成功"); } //或者 function copyText(value) { // 建立元素用於複製 var aux = document.createElement("input"); // 設定元素內容 aux.setAttribute("value", value); // 將元素插入頁面進行呼叫 document.body.appendChild(aux); // 複製內容 aux.select(); // 將內容複製到剪貼簿 document.execCommand("copy"); // 刪除建立元素 document.body.removeChild(aux); //提示 alert("複製內容成功:" + aux.value); } </script>
分享一個自己工作中用到的一鍵複製方法
/** * 一鍵貼上 * @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); } }
實現效果:
以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支援it145.com。
相關文章
<em>Mac</em>Book项目 2009年学校开始实施<em>Mac</em>Book项目,所有师生配备一本<em>Mac</em>Book,并同步更新了校园无线网络。学校每周进行电脑技术更新,每月发送技术支持资料,极大改变了教学及学习方式。因此2011
2021-06-01 09:32:01
综合看Anker超能充系列的性价比很高,并且与不仅和iPhone12/苹果<em>Mac</em>Book很配,而且适合多设备充电需求的日常使用或差旅场景,不管是安卓还是Switch同样也能用得上它,希望这次分享能给准备购入充电器的小伙伴们有所
2021-06-01 09:31:42
除了L4WUDU与吴亦凡已经多次共事,成为了明面上的厂牌成员,吴亦凡还曾带领20XXCLUB全队参加2020年的一场音乐节,这也是20XXCLUB首次全员合照,王嗣尧Turbo、陈彦希Regi、<em>Mac</em> Ova Seas、林渝植等人全部出场。然而让
2021-06-01 09:31:34
目前应用IPFS的机构:1 谷歌<em>浏览器</em>支持IPFS分布式协议 2 万维网 (历史档案博物馆)数据库 3 火狐<em>浏览器</em>支持 IPFS分布式协议 4 EOS 等数字货币数据存储 5 美国国会图书馆,历史资料永久保存在 IPFS 6 加
2021-06-01 09:31:24
开拓者的车机是兼容苹果和<em>安卓</em>,虽然我不怎么用,但确实兼顾了我家人的很多需求:副驾的门板还配有解锁开关,有的时候老婆开车,下车的时候偶尔会忘记解锁,我在副驾驶可以自己开门:第二排设计很好,不仅配置了一个很大的
2021-06-01 09:30:48
不仅是<em>安卓</em>手机,苹果手机的降价力度也是前所未有了,iPhone12也“跳水价”了,发布价是6799元,如今已经跌至5308元,降价幅度超过1400元,最新定价确认了。iPhone12是苹果首款5G手机,同时也是全球首款5nm芯片的智能机,它
2021-06-01 09:30:45