【jQuery】クリップボードにテキストをコピーする方法

jQueryでクリップボードにコピー

こちらでは、jQuery(JavaScript)を用いてテキストをクリップボードへコピーする方法について紹介しています。

テキストボックスとテキストエリアの値のテキストをコピーするのと、それ以外の要素のテキストをコピーするのでは少し方法が違うので、それぞれの方法について解説します。

テキストボックスやテキストエリアをコピーする方法

テキストボックスやテキストエリアの値をコピーするには、.select()メソッドで選択し、JavaScriptのdocument.execCommand('copy')を実行するするだけでクリップボードにコピーできます。

テキストボックスのサンプル

テキストボックスの値をクリップボードにコピーするサンプルです。

上の「コピー」というボタンを押すと、テキストボックス内のテキストデータがクリップボードにコピーされます。

HTMLとjQuery(JavaScript)のコードは以下のようになっています。

HTML
<input id="textbox1" type="text" " value="テストのテキスト。">
<button id="button1">コピー</button>
<span id="message1" class="red"></span>

HTMLではテキストを選択するためにテキストボックスを1つ、コピーを実行するためのボタンを1つ、コピーしたというメッセージを表示するためのspanを1つ配置しています。

jQuery
$('#button1').click(function(){
	$('#textbox1').select();
	document.execCommand('copy');
	$('#message1').text('コピーしました。').show().fadeOut(1000);
});

jQueryではボタンが押されたときに、テキストボックスを選択し、コピーを実行します。その後でコピーされたことがわかるように、メッセージを表示してフェードアウトさせています。

テキストエリアのサンプル

テキストエリアの値をクリップボードにコピーするサンプルです。

上の「コピー」というボタンを押すと、テキストボックス内のテキストデータがクリップボードにコピーされます。

HTMLとjQuery(JavaScript)のコードは以下のようになっています。

HTML
<textarea id="textarea2">テストデータ1。
テストデータ2。
テストデータ3。</textarea>
<button id="button2">コピー</button>
<span id="message2" class="red"></span>

HTMLではテキストを選択するためにテキストエリアを1つ、コピーを実行するためのボタンを1つ、コピーしたというメッセージを表示するためのspanを1つ配置しています。

jQuery
$('#button2').click(function(){
	$('#textarea2').select();
	document.execCommand('copy');
	$('#message2').text('コピーしました。').show().fadeOut(1000);
});

jQueryではボタンが押されたときに、テキストエリアを選択し、コピーを実行します。

その他の要素をコピーする方法

テキストボックスやテキストエリア以外の要素をコピーする方法を紹介します。

テキストボックスやテキストエリアの場合は、.select()メソッドを使ってテキストを選択できました。

しかしそれ以外の要素の場合は、.selectAllChildren()を使います。他にも方法はありますが、.selectAllChildren()を使うのが簡単だと思います。

その他の要素のサンプル

<html>
<body>
	hello!
</body>
</html>

コードをコピーするサンプルです。

<pre><code>タグで囲まれている内側の部分をコピーします。

上の「コピー」というボタンを押すと、コードが選択されクリップボードにコピーされます。

HTMLとjQuery(JavaScript)のコードは以下のようになっています。

HTML
<pre id="text3"><code><html>
<body>
	hello!
</body>
</html></code></pre>
<button id="button3">コピー</button>
<span id="message3" class="red"></span>

<pre><code>の内側にあるコード<html>~</html>の部分をコピーするのが目的です。

内側を選択するために<pre>タグにidを設定しています。

jQuery
$('#button3').click(function(){
	var elem = $('#text3').get(0);
	window.getSelection().selectAllChildren(elem);
	document.execCommand('copy');
	$('#message3').text('コピーしました。').fadeIn(200).fadeOut(1000);
});

ボタンが押されたときに、<pre><code>の内側にあるコードを選択するために、window.getSelection().selectAllChildren(elem)としています。

.selectAllChildren()の引数は、jQueryオブジェクトではなくNode(DOM要素)です。そのため、$('#text3').get(0)とし、jQueryオブジェクトをNodeに変換しています。

その他の要素のサンプル2

もう1つ簡単な方法として、仮想的なテキストエリアを作って.select()で選択する方法があります。

先ほどと同じHTMLに対して、以下のようなjQueryを実行します。

jQuery
$('#button3').click(function() {
	var dummy_area = $('<textarea>' + $('#text3').text() +'</textarea>');
	dummy_area.appendTo(this);
	dummy_area.select();
	document.execCommand('copy');
	dummy_area.remove();
});

2~3行目でダミーのテキストエリアを作成し、4行目で値を選択しています。

5行目でコピーしたら、6行目でダミーのテキストエリアを削除しています。

削除しないとダミーのテキストエリアが表示されてしまうので削除しておきましょう。


[prism]