文章をコピーするための、コピー機能つきのボタンの作り方と実装方法を紹介します。
コピー機能について
JavaScriptを使ったコピー機能は、工夫次第でユーザビリティを大幅に向上させます。PCなら選択してCtrl＋cでコピーすることもできますが、少し手間がかかりますし、細かい文章では操作しづらいのが問題点。長文をコピーする時も少し大変です。
そこで、JavaScriptを使ったコピーボタンが役立ちます。これは特定のエリア内の文章を、ボタン一つで簡単にコピーできるのが魅力。まずは、デモを確認してみて下さい。
ここにあるテキストメッセージをコピーします。ボタン一つで全部コピーできるので、ドラッグして文章を選択する時間や手間を削減できますし、コピーミスを防げるのもメリット。面倒な作業を減らせるので、ユーザーにとても喜ばれる機能です。
クリップボードにコピーしました
コピー機能の活用シーン
- クーポンコードなどコピペミスを防ぎたい
- 住所などのコピーを簡単にしたい
- コピーする部分が長文
特にコピーミスを防ぎたい時や、コピーする機会が多いコンテンツ、長文でコピーしづらいコンテンツに使うのが効果的でしょう。基本的にはキャンペーンコードやメールアドレス、住所などコピーするケースが多い部分でよく使われています。
あとは、長文で全部選択するのが大変な時にも、よく使われます。
コピー機能の作り方
HTMLとCSSで作った特定のDIV要素内のテキストを、JavaScriptで読み込みます。あとは、navigator.clipboard.writeTextを使ってクリップボードにアクセス。コピーの結果をお知らせする機能をつければ、完成です。
ソースコード
HTML
<div id="copyArea">
ここの文章をコピー。
</div>
<button class="bt_count" id="BtCopy">Go Copy</button>
<div id="MsgCopy">クリップボードにコピーしました</div>
CSS
#copyArea{
border: 1px solid #cccccc;
padding:24px;
margin:24px 0 ;
}
#MsgCopy{
visibility: hidden;
}
#MsgCopy.MsgCopyOn{
visibility:visible;
}
border: 1px solid #cccccc;
padding:24px;
margin:24px 0 ;
}
#MsgCopy{
visibility: hidden;
}
#MsgCopy.MsgCopyOn{
visibility:visible;
}
JavaScript
//ze-no:WebDevelopment
const ZeNoCopy = document.getElementById("BtCopy")
var copyArea = document.getElementById('copyArea')
var MsgCopy = document.getElementById('MsgCopy')
var copyText=copyArea.innerText;
ZeNoCopy.addEventListener('click', function() {
navigator.clipboard.writeText(copyText);
console.log("Ze-No-Copy:RUN ",copyText);
MsgCopy.style.visibility="visible";
})
const ZeNoCopy = document.getElementById("BtCopy")
var copyArea = document.getElementById('copyArea')
var MsgCopy = document.getElementById('MsgCopy')
var copyText=copyArea.innerText;
ZeNoCopy.addEventListener('click', function() {
navigator.clipboard.writeText(copyText);
console.log("Ze-No-Copy:RUN ",copyText);
MsgCopy.style.visibility="visible";
})
まとめ
JavaScriptによるコピー機能の作り方と実装について紹介しました。
目次-Index-
