ボタンをクリックするとクリップボードに対象のテキストをコピーするコピーボタン機能を紹介します。
今回はHTMLとjQueryを用いてテキストをコピーします。
コードをコピーして使用する場合はBootstrapなどのCSSできれいにして使ってください。
また、clipboard.jsなどの外部ライブラリもありますので必要に応じて使い分けてください。
目次
サンプル
コピーボタンを押すと「テキスト」の文字をコピーできます。
テキスト
テキスト
テキスト
テキスト
テキスト
jQueryコード
テキストをコピーするにはtextareaを作成し、その中に対象のテキストを入れてコピーする必要があります。
テキストを直接選択してコピーをすることはできません。
$(document).ready(function () {
$('.js-copybtn').click(function () {
if ($(this).data('target')) {
var target = $(this).closest('target');
} else {
var target = $(this).closest('[id]');
}
var text = target.find('.js-copyarea').html();
if ($(this).hasClass('js-copy-text')) {
text = text.replace(/\s/g, '').replace(/(<br>|<br \/>)/gi, '\n');
}
// クリップボードにコピー
var clipboard = $('<textarea></textarea>');
clipboard.val($.trim(text));
$(this).append(clipboard);
clipboard.select();
document.execCommand('copy');
clipboard.remove();
// アラート文の表示
var btnTxt = $(this).text();
$(this).text('コピーしました');
setTimeout(() => {
$(this).text(btnTxt);
}, 3000);
});
});
wordpress内で使用する
wordpress内で仕様する場合はjQueryをそのまま使用することはできないので、2行目を次のように変更して使います。
<script>
jQuery(document).ready(function ($) { // wordpressで使えるように変更
$('.js-copybtn').click(function () {
if ($(this).data('target')) {
var target = $(this).closest('target');
} else {
var target = $(this).closest('[id]');
}
var text = target.find('.js-copyarea').html();
if ($(this).hasClass('js-copy-text')) {
text = text.replace(/\s/g, '').replace(/(<br>|<br \/>)/gi, '\n');
}
// クリップボードにコピー
var clipboard = $('<textarea></textarea>');
clipboard.val($.trim(text));
$(this).append(clipboard);
clipboard.select();
document.execCommand('copy');
clipboard.remove();
// アラート文の表示
var btnTxt = $(this).text();
$(this).text('コピーしました');
setTimeout(() => {
$(this).text(btnTxt);
}, 3000);
});
});
</script>HTMLコード
HTMLコードは2つのパターンに対応しています。
- ネスト外からテキストをコピー
- ネスト内からテキストをコピー
使用するclassは以下のとおりです。
- js-copybtnクラス（コピーボタンに設置）
- js-copy-textクラス（必要に応じてコピーボタンに設置）
- js-copyareaクラス（コピー対象のテキストに設置）
js-copy-textクラスをつけることで改行やスペースを除外してコピーすることができます。
ネスト外からテキストをコピー
コピーしたいテキストをラップするidをコピーボタンのtargetにすることでテキストをコピーできます。
<!-- コピーボタン -->
<button class="js-copybtn" target="target-text">
コピー
</button>
<!-- コピーボタン -->
<button class="js-copybtn js-copy-text" target="target-text">
テキストのみコピー（改行やスペースなし）
</button>
<div id="target-text">
<!-- コピー対象のテキスト -->
<div class="js-copyarea">
テキスト
テキスト
テキスト
テキスト
テキスト
</div>
</div>ネスト内からテキストをコピー
コピーボタンとコピーしたいテキストが同じidにラップされているので、こちらではtargetをしてする必要はありません。
<div id="target-text">
<!-- コピーボタン -->
<button class="js-copybtn">
コピー
</button>
<!-- コピーボタン -->
<button class="js-copybtn js-copy-text">
テキストのみコピー（改行やスペースなし）
</button>
<!-- コピー対象のテキスト -->
<div class="js-copyarea">
テキスト
テキスト
テキスト
テキスト
テキスト
</div>
</div>まとめ
ネスト外からテキストをコピーするHTMLで全てに対応できる。
コメント