欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

使用?JS?復(fù)制頁面內(nèi)容的三種方案

 更新時(shí)間:2022年08月18日 09:29:32   作者:西炒蛋  
這篇文章主要為大家介紹了使用?JS?復(fù)制頁面內(nèi)容的三種方案詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪

引言

現(xiàn)在有很多第三方插件能夠?qū)崿F(xiàn) copy 功能,但如果讓我們自己去做,我們知道如何去實(shí)現(xiàn)嗎?

這篇文章介紹三種實(shí)現(xiàn)方案。

方式一:Async Clipboard API

使用 Async Clipboard API

這種方式使用起來最簡單,但兼容性不太好,而且要求比較多。

示例代碼:

const promise = navigator.clipboard.writeText(newClipText);

需要注意,方法的返回值是個(gè) Promise。并且使用此方法時(shí),頁面必須處于 focus 狀態(tài),否則會報(bào)錯(cuò)。

方式二:Document.execCommand API

使用 Document.execCommand

此方法雖然警告被廢棄,不再屬于 web 標(biāo)準(zhǔn),但歷史因素較多,相信瀏覽器還會支持很久。

復(fù)制 DOM 元素內(nèi)容

<div id="content">123456</div>
<button id="copyButton">復(fù)制</button>

復(fù)制 DOM 元素的時(shí)候,需要額外使用到 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();
  // 設(shè)置選中內(nèi)容
  range.selectNodeContents(content);
  // 清空選中內(nèi)容
  selection.removeAllRanges();
  // 添加選中內(nèi)容
  selection.addRange(range);
  document.execCommand('copy');
});

selection 需要先清空再添加 range。

這里會有一個(gè)細(xì)節(jié)問題,點(diǎn)擊復(fù)制按鈕之后,被復(fù)制的內(nèi)容處于選中狀態(tài),有些突兀。

解決方式是在復(fù)制完成之后調(diào)用 selection.removeAllRanges() 清空選中內(nèi)容即可。

再考慮一種情況,用戶在復(fù)制之前就選中了頁面的部分內(nèi)容。在復(fù)制完成之后,除了清空選中的復(fù)制內(nèi)容,還需要還原用戶在復(fù)制之前就選中的內(nèi)容。

實(shí)現(xiàn)代碼如下:

const copyButton = document.getElementById('copyButton');
const content = document.getElementById('content');
copyButton.addEventListener('click', function () {
  const selection = window.getSelection();
  const range = document.createRange();
  // 緩存用戶選中的內(nèi)容
  const currentRange =
    selection.rangeCount === 0 ? null : selection.getRangeAt(0);
  // 設(shè)置文檔片段
  range.selectNodeContents(content);
  // 清空選中內(nèi)容
  selection.removeAllRanges();
  // 將文檔片段設(shè)置為選中內(nèi)容
  selection.addRange(range);
  try {
    // 復(fù)制到剪貼板
    document.execCommand('copy');
  } catch (err) {
    // 提示復(fù)制失敗
  } finally {
    selection.removeAllRanges();
    if (currentRange) {
      // 還原用戶選中內(nèi)容
      selection.addRange(currentRange);
    }
  }
});

先緩存用戶選中的內(nèi)容,復(fù)制完成之后,再還原。

復(fù)制 input 元素內(nèi)容

使用 input 元素對象的 select 方法即可選中內(nèi)容,無需創(chuàng)建 range 片段設(shè)置選中內(nèi)容。

示例代碼:

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 內(nèi)容
  inputEl.select();
  // 復(fù)制到剪貼板
  try {
    document.execCommand('copy');
  } catch (err) {
    // 提示復(fù)制失敗
    // 。。。
  } finally {
    selection.removeAllRanges();
    if (currentRange) {
      // 還原用戶選中內(nèi)容
      selection.addRange(currentRange);
    }
  }
});

點(diǎn)擊復(fù)制按鈕,同樣不會移除之前選中的內(nèi)容。

方法三:覆寫 copy 事件

w3c.github.io/clipboard-a…

引用上面鏈接內(nèi)的一段代碼作為示例:

// 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();
});

在頁面復(fù)制任何內(nèi)容,粘貼輸出的內(nèi)容都會是 “西炒蛋”。

以上就是使用 JS 復(fù)制頁面內(nèi)容的三種方案的詳細(xì)內(nèi)容,更多關(guān)于JS 復(fù)制頁面內(nèi)容的資料請關(guān)注腳本之家其它相關(guān)文章!

相關(guān)文章

最新評論