<em>Mac</em>Book项目 2009年学校开始实施<em>Mac</em>Book项目,所有师生配备一本<em>Mac</em>Book,并同步更新了校园无线网络。学校每周进行电脑技术更新,每月发送技术支持资料,极大改变了教学及学习方式。因此2011
2021-06-01 09:32:01
現在有很多第三方外掛能夠實現 copy 功能,但如果讓我們自己去做,我們知道如何去實現嗎?
這篇文章介紹三種實現方案。
這種方式使用起來最簡單,但相容性不太好,而且要求比較多。
範例程式碼:
const promise = navigator.clipboard.writeText(newClipText);
需要注意,方法的返回值是個 Promise。並且使用此方法時,頁面必須處於 focus 狀態,否則會報錯。
此方法雖然警告被廢棄,不再屬於 web 標準,但歷史因素較多,相信瀏覽器還會支援很久。
<div id="content">123456</div> <button id="copyButton">複製</button>
複製 DOM 元素的時候,需要額外使用到 selection API 和 Range API。
developer.mozilla.org/en-US/docs/…
developer.mozilla.org/en-US/docs/…
範例程式碼:
const copyButton = document.getElementById('copyButton'); const content = document.getElementById('content'); copyButton.addEventListener('click', function () { const selection = window.getSelection(); const range = document.createRange(); // 設定選中內容 range.selectNodeContents(content); // 清空選中內容 selection.removeAllRanges(); // 新增選中內容 selection.addRange(range); document.execCommand('copy'); });
selection 需要先清空再新增 range。
這裡會有一個細節問題,點選複製按鈕之後,被複制的內容處於選中狀態,有些突兀。
解決方式是在複製完成之後呼叫 selection.removeAllRanges()
清空選中內容即可。
再考慮一種情況,使用者在複製之前就選中了頁面的部分內容。在複製完成之後,除了清空選中的複製內容,還需要還原使用者在複製之前就選中的內容。
實現程式碼如下:
const copyButton = document.getElementById('copyButton'); const content = document.getElementById('content'); copyButton.addEventListener('click', function () { const selection = window.getSelection(); const range = document.createRange(); // 快取使用者選中的內容 const currentRange = selection.rangeCount === 0 ? null : selection.getRangeAt(0); // 設定檔案片段 range.selectNodeContents(content); // 清空選中內容 selection.removeAllRanges(); // 將檔案片段設定為選中內容 selection.addRange(range); try { // 複製到剪貼簿 document.execCommand('copy'); } catch (err) { // 提示覆制失敗 } finally { selection.removeAllRanges(); if (currentRange) { // 還原使用者選中內容 selection.addRange(currentRange); } } });
先快取使用者選中的內容,複製完成之後,再還原。
使用 input 元素物件的 select
方法即可選中內容,無需建立 range 片段設定選中內容。
範例程式碼:
const copyButton = document.getElementById('copyButton'); const inputEl = document.getElementById('input'); copyButton.addEventListener('click', function () { const selection = window.getSelection(); const currentRange = selection.rangeCount === 0 ? null : selection.getRangeAt(0); // 選中 input 內容 inputEl.select(); // 複製到剪貼簿 try { document.execCommand('copy'); } catch (err) { // 提示覆制失敗 // 。。。 } finally { selection.removeAllRanges(); if (currentRange) { // 還原使用者選中內容 selection.addRange(currentRange); } } });
點選複製按鈕,同樣不會移除之前選中的內容。
參照上面連結內的一段程式碼作為範例:
// Overwrite what is being copied to the clipboard. document.addEventListener('copy', function (e) { // e.clipboardData is initially empty, but we can set it to the // data that we want copied onto the clipboard. e.clipboardData.setData('text/plain', '西炒蛋'); // This is necessary to prevent the current document selection from // being written to the clipboard. e.preventDefault(); });
在頁面複製任何內容,貼上輸出的內容都會是 “西炒蛋”。
以上就是使用 JS 複製頁面內容的三種方案的詳細內容,更多關於JS 複製頁面內容的資料請關注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