Help us understand the problem. What is going on with this article?

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

More than 1 year has passed since last update.
  • 2019/1/18 CSSによって選択できない場合があったので対応
  • 2017/11/1 改行がコピーできてなかったのでpreをつかうように変更
  • 2017/10/31 編集

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

simiraaaa
思いついたことを書く。 JavaScript、Javaについて書く事が多い。
https://twitter.com/simiraaaa
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした