JavaScript

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

More than 1 year has passed since last update.

2017/11/1改行がコピーできてなかったのでpreをつかうように変更

2017/10/31編集

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

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

function execCopy(string){
  var temp = document.createElement('div');

  temp.appendChild(document.createElement('pre')).textContent = string;

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

  document.body.appendChild(temp);
  document.getSelection().selectAllChildren(temp);

  var result = document.execCommand('copy');

  document.body.removeChild(temp);
  // true なら実行できている falseなら失敗か対応していないか
  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でもソフトウェアキーボードを出さないようにコピーするように変更しました。

確認したブラウザ

  • Chrome 55
  • Firefox 47
  • iOS11 Safari

参考

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

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