JavaScript

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



  • 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