JavaScriptでクリップボードにコピー（Chrome/Firefox/Safari10〜/IE9〜）

※2022/4/19追記：ここで使っている仕様は古くなり、非推奨になっているため、新しい記事を書きました。そちらを参照してください。

---

「クリップボードにコピー」はJavaScriptのみでは不可能だと、昔に思い込んだままだったのですが、HTMLの各種APIとJavaScriptを組み合わせることで、ほとんどのブラウザで実現できるようになってきたようです。

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');
  return false;
}
document.querySelector('.copyBtn').addEventListener('click', copyText, false);

使用するAPIとブラウザ対応

以下のAPIを使っています。

API	仕様	対応ブラウザ
Range API	DOM Level2 + Living standard	IE9〜、Edge、Chrome、Firefox、Safari
Selection API > getSelection()	W3C 草案	IE、Edge、Chrome、Firefox、Safari、 Android browser4.3〜 *ただし、window.getSelection()のサポートに限って確認。 Selection APIの全てをサポートしていないブラウザもあります。
Editing API > execCommand('copy')	W3C 勧告改定案	IE9〜、Edge、Chrome、Firefox、Safari10〜 これも仕様の全てをサポートしているブラウザは少ないですが、「copy」の実行についてのみ確認。

---

Safariがバージョン10以降なのがちょっとネックではありますが（2017年2月現在）、限られたユーザー層向けのWebサイトでは実際に使用したケースでは特に不具合の報告はありません。
ブラウザによっては、一旦「クリップボードにアクセスしようとしています」というような警告ダイアログが表示されるので、導入の際にはそのあたりも検討が必要になりそうです。