【jQuery】ボタンをクリックしたら特定の文字列をクリップボードにコピーさせる方法を紹介

通常、サイト上でコピーをしたい文字列があるときはテキストを選択して「ctrl」+「c」でコピーすると思います。

ですがコピーするときに選択するテキストを間違えてしまったりちゃんとコピーさせるためにjsを使うことによってユーザーがボタンクリック一つでコピーさせることができます。

クリップボードにコピーさせる方法としては、jsのプラグインを使う方法、javascriptを使う方法、jQueryを使う方法の3種類があります。

実際には、プラグインを使わずに数行から十行くらいのjsを書けばクリップボードのコピー処理はかけてしまいます。

今回は、jQueryを使ってボタンをクリックしたときに設定しておいた文字列をコピーさせる方法を紹介していきます。

HTML
1. 補足
CSS
jQuery
サンプル
最後に

HTML

<div class="clipboard">
	<div class="clipboard_copy_txt">abc12345678</div>
	<button type="button" class="copy_btn">こちらをクリックするとコピーできます！</button>
</div>

補足

「clipboard_copy_txt」クラスには、コピーさせたい文字列をあらかじめ入れておきます。

上のソースでは「abc12345678」というテキストをコピーさせたいので「clipboard_copy_txt」クラスには「abc12345678」というテキストを入れておきます。

「copy_btn」クラスの要素は、コピーするボタンになります。

CSS

<style>
.clipboard_copy_txt{display: none;}
</style>

今回はコピーする文字列は見えないようにしておきたいのでコピーさせるテキストを入れている「clipboard_copy_txt」クラスの要素を「display: none;」で非表示にしておきます。

jQuery

jQuery(function() {
	jQuery('.copy_btn').on('click', function(){
	//コピーさせたい文字列を取得
    	var text = jQuery('.clipboard_copy_txt').text();
	//textareaタグを追加
  	jQuery(this).append('<textarea class="clipboard_textarea">' + text + '</textarea>');
	//textareaの文字を選択
    	jQuery('.clipboard_textarea').select();
	//コピー
    	document.execCommand('copy');
	//textareタグを削除
   	jQuery('.clipboard_textarea').remove();
    	// アラート文の表示
    	alert('文字列「' + text + '」をコピーしました');
	});
});

「copy_btn」クラスのボタンをクリックしたらコピーさせたい文字列を取得します。

その次にコピーさせた文字列をtextareaにセットしてタグとして追加します。

textareaの文字列を選択状態にします。

そしてdocument.execCommand(‘copy’);でコピーします。

コピーが完了したら textareaを削除してアラートでコピーした文字列をポップアップで表示します。

サンプル

サンプルはこちら

最後に

どうでしょうか？

それほど難しくなかったと思います。

これくらいならプラグインを使わなくても作れますね。

リンク