なんとなーく気になったので調べてみました。コードを公開するようなサイトだと使えそうです。

基本形

HTML

コピーさせたいテキストにはcopy_txtというクラスを、コピーを実行するボタンにはcopy_btnというクラスを付与します。

<div class="copy_wrap">
	<div class="copy_txt">三└(┐卍^o^)卍ﾄﾞｩﾙﾙﾙﾙﾙ</div>
	<button type="button" class="copy_btn">Copy</button>
</div>

jQuery

解説は後述します。

$(function() {
	$('.copy_btn').on('click', function(){
		let text = $('.copy_txt').text();
		let textarea = $('<textarea></textarea>');
		textarea.text(text);
		$(this).append(textarea);
		textarea.select();
		document.execCommand('copy');
		textarea.remove();
		alert('「'+text+'」をコピーしました');
	});
});

copy_btnがクリックされたら実行。

変数「text」にcopy_txtの中身をセット。

変数「textarea」に空のtextarea要素をセット。

先程作成した空のtextareaの中にtextをセットし、HTML内に追加。

textareaを選択状態にし、コピーを実行。そして用済みのtextareaは削除。

コピーが実行されたことをアラートで通知して終わり。

実行結果

これで「Copy」ボタンを押すと特定の要素内のテキストをクリップボードにコピーさせることが可能になりました。
やっている事はシンプルなんですが、divのテキストをコピーさせるとなると地味に記述が長いですね…

See the Pen jQueryClipboard - 1 by Leo_8192 (@Leo_8192) on CodePen.

これで完成…と言いたい所なんですが、ページ内に複数のcopy_txtがあると丸ごとコピーされてしまうので、ちょっと改造してみます。

複数のボタンに対応させる

コピーボタンをページ内に複数設置する場合、jQueryの記述を少しいじる必要があります。

HTML

copy_txtとcopy_btnを、それぞれcopy_wrapで囲っておきましょう。

<div class="copy_wrap">
	<div class="copy_txt">三└(┐卍^o^)卍ﾄﾞｩﾙﾙﾙﾙﾙ</div>
	<button type="button" class="copy_btn">Copy</button>
</div>
<div class="copy_wrap">
	<div class="copy_txt">(((ꎤ’ω’)و三 ꎤ’ω’)-o≡ｼｭｯｼｭ</div>
	<button type="button" class="copy_btn">Copy</button>
</div>
<div class="copy_wrap">
	<div class="copy_txt">(☛(◜◔。◔◝)☚))</div>
	<button type="button" class="copy_btn">Copy</button>
</div>

jQuery

いじるのは3行目だけです。

$(function() {
	$('.copy_btn').on('click', function(){
		let text = $(this).siblings('.copy_txt').text();
		let textarea = $('<textarea></textarea>');
		textarea.text(text);
		$(this).append(textarea);
		textarea.select();
		document.execCommand('copy');
		textarea.remove();
		alert('「'+text+'」をコピーしました');
	});
});

「クリックされたcopy_btnと同じ階層に存在するcopy_txt内のテキストを取得する」という記述に変更しました。

実行結果

今度こそ完成です。

See the Pen jQueryClipboard - 2 by Leo_8192 (@Leo_8192) on CodePen.

なんかもっとスマートな書き方がありそうですが、とりあえずこれでOKかな？実際に使用するなら、ボタンやアラート周りの装飾もしっかり整えたいですね。