More than 3 years have passed since last update.

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

JavaScript

Last updated at 2020-12-18Posted at 2017-02-10

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;
}