yuw27b’s blog

技術メモと雑記

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

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

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、ChromeFirefoxSafari
Selection API > getSelection() W3C 草案 IE、Edge、ChromeFirefoxSafari
Android browser4.3〜
*ただし、window.getSelection()のサポートに限って確認。
Selection APIの全てをサポートしていないブラウザもあります。
Editing API > execCommand('copy') W3C 勧告改定案 IE9〜、Edge、ChromeFirefox、Safari10〜
これも仕様の全てをサポートしているブラウザは少ないですが、「copy」の実行についてのみ確認。



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