こちらでは、jQuery(JavaScript)を用いてテキストをクリップボードへコピーする方法について紹介しています。
テキストボックスとテキストエリアの値のテキストをコピーするのと、それ以外の要素のテキストをコピーするのでは少し方法が違うので、それぞれの方法について解説します。
テキストボックスやテキストエリアをコピーする方法
テキストボックスやテキストエリアの値をコピーするには、.select()メソッドで選択し、JavaScriptのdocument.execCommand('copy')を実行するするだけでクリップボードにコピーできます。
テキストボックスのサンプル
テキストボックスの値をクリップボードにコピーするサンプルです。
上の「コピー」というボタンを押すと、テキストボックス内のテキストデータがクリップボードにコピーされます。
HTMLとjQuery(JavaScript)のコードは以下のようになっています。
<input id="textbox1" type="text" " value="テストのテキスト。">
<button id="button1">コピー</button>
<span id="message1" class="red"></span>HTMLではテキストを選択するためにテキストボックスを1つ、コピーを実行するためのボタンを1つ、コピーしたというメッセージを表示するためのspanを1つ配置しています。
$('#button1').click(function(){
$('#textbox1').select();
document.execCommand('copy');
$('#message1').text('コピーしました。').show().fadeOut(1000);
});jQueryではボタンが押されたときに、テキストボックスを選択し、コピーを実行します。その後でコピーされたことがわかるように、メッセージを表示してフェードアウトさせています。
テキストエリアのサンプル
テキストエリアの値をクリップボードにコピーするサンプルです。
上の「コピー」というボタンを押すと、テキストボックス内のテキストデータがクリップボードにコピーされます。
HTMLとjQuery(JavaScript)のコードは以下のようになっています。
<textarea id="textarea2">テストデータ1。
テストデータ2。
テストデータ3。</textarea>
<button id="button2">コピー</button>
<span id="message2" class="red"></span>HTMLではテキストを選択するためにテキストエリアを1つ、コピーを実行するためのボタンを1つ、コピーしたというメッセージを表示するためのspanを1つ配置しています。
$('#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)のコードは以下のようになっています。
<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を設定しています。
$('#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を実行します。
$('#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行目でダミーのテキストエリアを削除しています。
削除しないとダミーのテキストエリアが表示されてしまうので削除しておきましょう。
