【jQuery】ボタンをクリックしたら設定した特定の文字列をクリップボードにコピーする

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

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

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

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

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

HTML

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

clipboard_copy_txtには、コピーする文字列を入れます。

copy_btnは、コピーするボタンになります。

CSS

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

今回は、 コピーする文字列は見えないようにするので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を削除してアラートでコピーした文字列をポップアップで表示します。

最後に

どうでしょうか?

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

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

コメント

タイトルとURLをコピーしました