yuw27b’s blog

技術メモと雑記

JavaScriptでクリップボードにコピー(2022年版)

2017年に書いた記事が、2022年現在では非推奨になっているAPIを使っているので、改めて。

変わったところ

document.execCommand('copy')が仕様からなくなり、非推奨になりました(MDN)。今のところどのブラウザでも動作しますが、今後も動く保証はありません(とはいえ後方互換のために当面は動くと思いますが)。代わりにClipboard APIという仕様が整備されているので、新たに実装する場合はこちらを使うべきです。

HTMLとJavaScriptのコード
<p class="copyTarget">コピーしてもらいたいテキスト</p>
<button class="copyBtn">クリップボードにコピーする</button>
function copyText () {
  var $target = document.querySelector('.copyTarget');
  if (!$target) {
    return false;
  }
  var range = document.createRange();
  range.selectNode($target);
  window.getSelection().removeAllRanges();
  window.getSelection().addRange(range);

  // document.execCommand('copy'); // ←非推奨に。
  navigator.clipboard.writeText($target.innerText);

  return false;
}
document.querySelector('.copyBtn').addEventListener('click', copyText, false);
テキストエリア内のコンテンツをコピーする場合
<textarea class="textarea">テキストエリアのテキスト</textarea>
<button class="copyBtn">クリップボードにコピーする</button>
function copyText () {
  var $target = document.querySelector('.textarea');
  if (!$target) {
    return false;
  }

  $target.select();
  navigator.clipboard.writeText($target.value);

  return false;
}
document.querySelector('.copyBtn').addEventListener('click', copyText, false);
クリップボードからコピーする
<textarea class="textarea">テキストエリアのテキスト</textarea>
<button class="copyBtn">クリップボードからコピーする</button>
function copyText () {
  var $target = document.querySelector('.textarea');
  if (!$target) {
    return false;
  }

  navigator.clipboard.readText().then(clipText => {
    $target.value = clipText;
  });

  return false;
}
document.querySelector('.copyBtn').addEventListener('click', copyText, false);

ユーザーの許可を求める表示が出ますが、許可するとクリップボードにあるテキストがテキストエリアの内容に置き換わります。