JavaScriptでクリップボードに文字をコピーする(ブラウザ)

• 2020/12/18 Clipboard API でコピーする方法を追記
• 2019/1/18 CSSによって選択できない場合があったので対応
• 2017/11/1 改行がコピーできてなかったのでpreをつかうように変更
• 2017/10/31 編集

Clipboard API でやる方法

clipboard API を使うと簡単に実装できます。

ただし、https じゃないと動かないようです。
参照: https://developer.mozilla.org/ja/docs/Web/API/Clipboard

サンプル

<textarea id="textarea">Hello, World!</textarea>
<button type="button" id="button">コピー</button>

document.getElementById('button').onclick = () => {
  var text = document.getElementById('textarea').value;
  navigator.clipboard.writeText(text).then(e => {
    alert('コピーできました');
  });
};

document.execCommand('copy') でやる方法

document.execCommand('copy') で現在選択している部分をコピーできます。

それを少し応用して、任意の文字列をコピーできるように関数化したものです。

function execCopy(string){

  // 空div 生成
  var tmp = document.createElement("div");
  // 選択用のタグ生成
  var pre = document.createElement('pre');

  // 親要素のCSSで user-select: none だとコピーできないので書き換える
  pre.style.webkitUserSelect = 'auto';
  pre.style.userSelect = 'auto';

  tmp.appendChild(pre).textContent = string;

  // 要素を画面外へ
  var s = tmp.style;
  s.position = 'fixed';
  s.right = '200%';

  // body に追加
  document.body.appendChild(tmp);
  // 要素を選択
  document.getSelection().selectAllChildren(tmp);

  // クリップボードにコピー
  var result = document.execCommand("copy");

  // 要素削除
  document.body.removeChild(tmp);

  return result;
}

サンプル

JavaScriptでクリップボードにコピーする - http://runstant.com/simiraaaa/projects/execCopy3

var textarea = document.getElementById('textarea');
var button = document.getElementById('button');

button.onclick = function(){
  if(execCopy(textarea.value)){
    alert('コピーできました');
  }
  else {
    alert('このブラウザでは対応していません');
  }
};

注意点

基本的にはユーザアクション(クリック等)からのイベント内の処理でしか使えません。
(なぜかChromeだとユーザアクション関係なくできてしまいますが...)

iOS Safariで使用すると、一瞬ソフトウェアキーボードが見えて少しダサいです。
blur() で即閉じしてはいますが、どうしても見えてしまいます。

iOS Safariでもソフトウェアキーボードを出さないようにコピーするように変更しました。

また、要素を選択してコピーしているので、貼り付ける環境によってはCSSが入ってしまうことがあります。
そういうのを防ぎたい場合は、PCだけ分岐してtexareaを使うようにすると良いと思います

// テキストエリアバージョン
function execCopy(string){
  var temp = document.createElement('textarea');

  temp.value = string;
  temp.selectionStart = 0;
  temp.selectionEnd = temp.value.length;

  var s = temp.style;
  s.position = 'fixed';
  s.left = '-100%';

  document.body.appendChild(temp);
  temp.focus();
  var result = document.execCommand('copy');
  temp.blur();
  document.body.removeChild(temp);
  // true なら実行できている falseなら失敗か対応していないか
  return result;
}

確認したブラウザ

• Chrome 55
• Firefox 47
• iOS11 Safari

参考

話題の document.execCommand('copy') を使ってコピーボタンを置く - http://qiita.com/pastak/items/416fa5f1030c1fff6afd

JavaScript Web APIで「クリップボードにコピー」する - https://qiita.com/elferia/items/cfc3f8e0971d3df00bea