Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
Help us understand the problem. What is going on with this article?

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

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