★ 今日はこんな記事も読まれています ★

javascript でテキストをクリップボードにコピーする２つの方法

2018年9月13日Java Script

javascript を使ってボタンなどのクリックで、要素の中にある文字列をクリップボードにコピーする方法です。

ここでは javascript ライブラリ"clipboard.js" を利用する方法と、普通にスクリプトを書く２つの方法を紹介します。ブラウザのバージョンによっては使えないことがあるので、古いバージョンのブラウザも対象としたい場合は確認が必要になります。

clipboard.js を使う

javascript ライブラリ “clipboard.js"を使うと簡単にコピーボタンを用意できます。

やることは３つ。

  1. ライブラリを読み込ませる
  2. コピーしたいテキストとボタンを準備する
  3. 実行のためのスクリプトを書く

手順だけ見ると面倒そうですが、コピペで済むので手間はかかりません。

１．スクリプトを読み込ませる

clipboard.js はを使うには CDNを利用するか、ダウンロードしたファイルをサーバに置いてヘッダーで読み込ませます。

CDNを利用する

こちらをコピーして head 内に貼り付け。

<script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/2.0.0/clipboard.min.js"></script>

その他のCDNのリストはこちら。

サーバに設置する

サーバに置く場合は、github からファイルをダウンロードしてきます。

取得clipboard.js – github

dist ディレクトリにある clipboard.min.js を利用します。

ボタンとスクリプトの設置

必要なものは、コピーしたい文字列の入った要素、コピーするためのトリガー（ようはボタン）、スクリプトの３点。トリガーはボタンの形をしている必要はなく、たとえばテキストボックスをクリックしたら、その内容をコピーすることもできます。

HTML

コピーする対象には好きな要素を指定できます。ただボタンがないと利用者に分かりにくいので、ここではボタンとコピー対象を別の要素にします。

コピーしたい要素とボタンを別に設置する場合、コピーしたい要素に id を、にデータ属性 [data-clipboard-target="#コピーしたい要素のID"］を付け加えます。

たとえば idがexample1 という input ボックスの内容をコピーしたいのなら、コピーするボタンには button class="btn-example1″ data-clipboard-target="#example1″ のように書きます。

<input id="example1" type="text" value="https://github.com/zenorocha/clipboard.js.git" /><button class="btn-example1" data-clipboard-target="#example1">コピー</button>

スクリプト

new ClipboardJS('.btn-example1’)の （） 内で、ボタンのCSSセレクタを指定します。

<script>
var clipboard = new ClipboardJS('.btn-example1');
clipboard.on('success', function(e) {
/*　成功時の処理　*/
e.clearSelection();//選択状態を解除
});
clipboard.on('error', function(e) {
/*　失敗時の処理　*/
});
</script>

var clipboard = new ClipboardJS('.btn-example1’)　だけでもコピーだけはできますが、コピー対象のテキストが選択された状態になってしまうので、後処理として e.clearSelection() は必要になります。

clipboard.js 実行サンプル

 

data-clipboard-target をつけるのが面倒な場合

上の書き方ではボタンの HTML にデータ属性を付けないといけないため煩わしい。そんな時は [var clipboard]の部分でコピー対象を取得するように書き換えます。

var clipboard=new ClipboardJS('.btn', {
target: function(trigger) {
return trigger.previousElementSibling;//コピーの対象要素がボタンの一つ前にある場合
}
});

コピー対象がボタンの次の要素なら [trigger.nextElementSibling]、手前の要素なら [trigger.previousElementSibling] とします。

 

execCopyを使う

execCommand('copy’)を使って、普通に javascript で書く方法です。この項はこちらの記事を参考にしています。

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

 

上の記事のコードは改行にも対応していて便利。そのままでも使えるのですが、複数の項目をコピーしたい場合はちょっと面倒。何番目の要素かをクラス名で判別すればいいのですが、たとえばインプットボックスの横にコピーボタンをつけるとは限らないケースだと、コピー対象がずれてしまう。

そこで要素の個数に左右されないよう、コピーボタンの手前にある要素をコピーするように変更しました。

HTML

<input type="text" value="https://yaruzou.net" /><button class="btn-example2">コピー</button>

スクリプト

<script>
var btn_class=document.getElementsByClassName("btn-example2");
var len=btn_class.length;
for(i=0;i<len;i++){
btn_class[i].onclick=function(){execCopy(this.previousElementSibling.value)};
}
//$('.btn-example2').on('click',function(){execCopy(this.previousElementSibling.value);});
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;
}
</script>

function execCopy(string) の手前の部分はちょっと長ったらしいので、気になるようなら jQuery を使って、 $('.btn-example2’).on('click’,function(){execCopy(this.previousElementSibling.value);}); とするほうが早いです（コメントアウトしてある部分を外し、その前を消す）。

execCopy 実行サンプル

 

もっといい方法もあるとは思いますが、手前の要素になにかする必要もなく、ボタンのクラス名だけで処理できるので、とりあえずこれが楽かなと思います。

Java Script