ども。WEBおじさんです。
今回は、ボタンを押して任意のテキストをコピーするという機能を作ってみたいと思います。
これ、とても簡単です。
プロセスとしては「ボタンをクリック」→「任意のテキストを取得」→「クリップボードへ入れる」という3工程。
実に単純。
もちろん、ボタンではなくて特定の要素を対象にすることも可能です。
ソースは以下。
＜ HTML ＞
<p id=”cptext”>コピーするテキスト</p>
<button class=”btncp”>↑のテキストをコピー</button>
<p id=”fin”></p>
＜ JS >
<script>
$(function(){
$(document).on(‘click’,’.pwcopy’,function(){
var texts = $(‘#ptext’).text();
var copyText = document.getElementById(‘ptext’);
var range = document.createRange();
range.selectNode(copyText);
window.getSelection().addRange(range);
document.execCommand(“copy”);
$(‘#fin’).text(texts+’をクリップボードにコピーしました！’).fadeIn(100).fadeOut(2000);
});
});
</script>
これでクリップボードにコピーされます。
ちなみに、今回はjQueryだけではなくて、JavaScriptも混合のソースです。
最後の一行は、コピー後のお知らせってとこですかね。
実際はコピーしてるかどうかを確認してるわけではないので、エラーが出ずに処理が完了したら出ちゃいますｗ
もしちゃんとコピーしたことを確認してから、ということであればまた別の処理が必要になるので、それはまた別の機会に。
一行ずつ解説したいところですが、解説を読む前にまずこのソースをコピーして使ってみてから一行ずつを分解してググって調べた方が自分の身になりますので、仕組みをちゃんと知りたい方は実際に動かした後に調べた方がいいと思います。
ということで、今回はここまで！