JavaScriptを使用してクリップボードにコピーする方法

コピーしてどこかに貼り付ける必要があるものを提供するサイトを使用することがあります。多分APIキー。たぶん、購入したばかりのアプリケーションのアクティベーショントークンです。

とにかく、ボックス内をクリックすると、ボックス内のテキストがクリップボードにコピーされるので、直接どこかに貼り付けることができます。

その機能をサイトに実装するにはどうすればよいですか？クリップボードAPIを使用する！

コピー/貼り付けを機能させる別の方法があります。document.execCommand()機能。ここではそのオプションについては説明しません。クリップボードAPIは、そのコマンドの後継となることを目的としています。

クリップボードAPIは、navigator.clipboardオブジェクト：

navigator.clipboard

クリップボードAPIは比較的最近のものであり、すべてのブラウザがそれを実装しているわけではありません。 Chrome、最新のEdge（クロムベース）、Firefox、Operaで動作します。

このオブジェクトの存在をチェックして、機能が実装されていることを確認できます。

if (!navigator.clipboard) {
  // Clipboard API not available
  return
}

ここで理解しなければならないことの1つは、ユーザーの許可なしにクリップボードからコピー/貼り付けすることはできないということです。

クリップボードを読み書きしている場合は、権限が異なります。書いている場合、必要なのはユーザーの意図だけです。クリックなどのユーザーアクションへの応答にクリップボードアクションを配置する必要があります。

クリップボードへの書き込み

あなたが持っていると言うpHTMLページの要素：

<p>Some text</p>

その上にクリックイベントリスナーを作成し、最初にクリップボードAPIが使用可能かどうかを確認します。

document.querySelector('p').addEventListener('click', async event => {
  if (!navigator.clipboard) {
    // Clipboard API not available
    return
  }
})

さて、その内容をコピーしたいpクリップボードにタグを付けます。私たちは調べることによってそうしますinnerText要素の、によって識別されるevent.target：

document.querySelector('p').addEventListener('click', async event => {
  if (!navigator.clipboard) {
    // Clipboard API not available
    return
  }
  const text = event.target.innerText
})

次に、navigator.clipboard.writeText()メソッド。発生する可能性のあるエラーを処理するために、try / catchでラップします。

これは例の完全なコードです：

document.querySelector('p').addEventListener('click', async event => {
  if (!navigator.clipboard) {
    // Clipboard API not available
    return
  }
  const text = event.target.innerText
  try {
    await navigator.clipboard.writeText(text)
    event.target.textContent = 'Copied to clipboard'
  } catch (err) {
    console.error('Failed to copy!', err)
  }
})

ここでは、Codepenの例を見て試してみることができます

ペンを見るクリップボードAPIの記述例フラビオ・コープス（@flaviocopes） オンCodePen。