jQueryを使ってコピーボタンを実装する方法は、以下のようになります。
<div class="target-btn">
<span class="target-text">テキスト</span>
<span class="copy-btn">コピー</span>
</div>
<script src="jquery-3.7.1.min.js"></script>
<script>
$('.copy-btn').on('click', function() {
$target_element = $(this).closest('.target-btn').find('.target-text');
$target_text = $target_element.text();
navigator.clipboard.writeText($target_text);
});
</script>コピーボタンについてCSSを使ったデザイン変更については省略しています。
クリックイベントを実装する
$('.copy-btn').on('click', function() {
// Your code goes here.
});セレクタでボタン要素（ここでは.copy-btn）を取得し、クリックイベントを追加します。
コピーするテキスト（文字列）を取得する
$target_element = $(this).closest('.target-btn').find('.target-text');
$target_text = $target_element.text();1行目でコピーしたいテキストを含む要素を取得し、2行目でコピーしたいテキストを取得しています。
closest()メソッドは、JavaScriptのメソッドで、一致するCSSセレクターを自身または自身の祖先要素から探しにいきます。
closest()メソッドは、以下のように子要素を探しに行くことができません。
<div class="target-btn">
<span class="target-text">テキスト</span>
<span class="copy-btn">コピー</span>
</div>
<script src="jquery-3.7.1.min.js"></script>
<script>
$('.target-btn').on('click', function() {
$copy_text = $(this).closest('.target-text').text();
alert($copy_text);
});
</script>そのため、一度親要素を探しにいき、そのあとで子要素を探すという手順を取ります。
クリップボードに書き込む
navigator.clipboard.writeText($target_text);取得したコピーしたいテキストをClipboard APIのwriteText()メソッドを利用して、クリップボードに書き込みます。
クリップボードとは、データを一時的に保存する場所です。
参考：Clipboard: writeText() method
これでjQueryを使った基本的なコピーボタンの実装は完了です。
コピー完了のダイアログを表示する
$(this).addClass('copy-done');
setTimeout( () => {
$(this).removeClass('copy-done');
}, 2000);ユーザーにコピーが完了したことを知らせたい場合、上記のコードを追加します。
setTimeout(fucntion() {
$(this).removeClass('copy-done');
}, 2000);とした場合、thisの参照先がwindowになってしまう点に注意が必要です。そのため、アロー関数を利用しています。
アロー関数でうまく動作しない場合、他にproxyを利用する方法や変数を保持する方法があります。
そして、CSSで表示用のダイアログを作成します。
.copy-done::before {
content: 'コピー完了';
display: block;
width: 200px;
height: 100px;
line-height: 100px;
position: fixed;
left: 0;
top: 0;
bottom: 0;
right: 0;
margin: auto;
background: rgba(0,0,0,0.5);
color: #fff;
text-align: center;
font-size: 16px;
z-index: 9999;
}以下のように、2秒間の間ダイアログが表示されます。
ダイアログを含めた最終的なコードは以下のようになります。
<div class="target-btn">
<span class="target-text">テキスト</span>
<span class="copy-btn">コピー</span>
</div>
<script src="jquery-3.7.1.min.js"></script>
<script>
$('.copy-btn').on('click', function() {
$target_element = $(this).closest('.target-btn').find('.target-text');
$target_text = $target_element.text();
navigator.clipboard.writeText($target_text);
$(this).addClass('copy-done');
setTimeout( () => {
$(this).removeClass('copy-done');
}, 2000);
});
</script>
<style>.copy-done::before {
content: 'コピー完了';
display: block;
width: 200px;
height: 100px;
line-height: 100px;
position: fixed;
left: 0;
top: 0;
bottom: 0;
right: 0;
margin: auto;
background: rgba(0,0,0,0.5);
color: #fff;
text-align: center;
font-size: 16px;
z-index: 9999;
}</style>注意点
執筆時点（2024年12月時点）では、以下のようにdocument.execCommandメソッドを使用する方法は非推奨となっています。
document.execCommand("Copy");