案件で「特定の要素をクリックしたら、指定したテキストをクリップボードにコピーする。」という機能を実装することがあったので、備忘録として残します。
簡単に言うと、要素（ボタンや画像）をクリックしたら、テキストをコピーして、すぐに貼り付けられる状態にしたい！ということです。
私が対応した案件は、LPでクーポンコードが記載された画像をクリックすると、クーポンコードがコピーされる！といったものでした。
多様なサイトで見かける機能なので、覚えておくと制作効率向上につながりそうです！
さらに、サイトの利便性も向上します。
- JavaScriptを使用して特定のテキストをコピーする方法。
- コピペで使用できる参考コード
この記事では、上記を中心に記述していきます。
特定の要素をクリックしたらコピーさせるためのコード。
最初にコードを記述しておきます。
const clickTargets = document.getElementsByClassName('coupon_area');
const code = '1234567';
for(let i = 0; i < clickTargets.length; i++) {
clickTargets[i].addEventListener('click', function() {
if(!navigator.clipboard) {
alert('ブラウザが対応していません。お手数ですが、直接クーポンコードを入力してください。');
} else {
navigator.clipboard.writeText(code);
alert('クーポンコード(' + code +')がコピーされました。');
}
});
}解説していきます。
const clickTargets = document.getElementsByClassName('coupon_area');の「coupon_area」だけクリックさせたい要素に変更して、
const code = '1234567';の「1234567」をコピーさせたいコードに変えてあげれば、すぐにでも使用できます。
お急ぎの方は、上記の方法でお試しください。
クリックする要素と指定のテキストを定数に格納する。
ここからは、前述したコードの内容を解説していきます。
const clickTargets = document.getElementsByClassName('coupon_area');上記コードの「coupon_area」で対象の要素をしていしています。
ここに格納した要素が、クリックされたら指定したコードがコピーされます。
上記の記述では、「getElementsByClassName」としていますが、もちろん記述を変更すれば「id」でも可能です。その場合は、for分は不要になります。
大抵のLPがそうだとは思いますが、私が担当した案件では１ページ内に複数の同一要素があったので、idでは対応できませんでした。
const clickTarget = document.getElementById('coupon_area');
clickTarget.addEventListener('click', function(){
const code = '1234567';
if(!navigator.clipboard) {
alert('ブラウザが対応していません。お手数ですが、直接クーポンコードを入力してください。');
} else {
navigator.clipboard.writeText(code);
alert('クーポンコード(' + code +')がコピーされました。');
}
});idなら上記のコードを参考にしてみてください。
あとは、コピーさせたいコードも定数に格納しておきます。
const code = '1234567';「1234567」の部分をコピーさせたいコードに変更して使用してください。
for文で配列を展開してクリックされた要素を取得。
getElementsByClassNameで指定した要素が全て配列に格納されます。
なので、１つずつ取り出して、クリックされた要素を取得するために、for文を使用しています。
for(let i = 0; i < clickTargets.length; i++) その後、クリックされた要素を取得・発火のタイミングをクリックにします。
clickTargets[i].addEventListener('click', function()ここでなぜ、クリックされたようを個別に取得しているかというと。
もし、対象の要素が同一だったとします。しかし、コピーさせるコードが対象の要素によって違う場合に対応させるためです。
今回は、サイト全体で統一のコードをコピーさせればOKだったので、事前にテキストをjsで定数に格納しましたが、それぞれ違う場合にはHTML上にinputタグを設置して、クリックされた要素に紐付いているinputタグを取得させることで、要素によって取得できるテキストを変更することもできます。
inputタグを使用する場合には、「.value」を使います。
navigator.clipboardを使ってクリップボードにテキストをコピーする。
ここまでで、以下の内容が完了しました。
- 特定の要素を取得
- どの要素がクリックされたか判定
- 発火タイミング
あとは、動作処理を特定してあげるだけです。
今回は、以下のコードで実装しています。
navigator.clipboard.writeText(code);そして、コピーされたのがわかるように
alert('クーポンコード(' + code +')がコピーされました。');としてあげれば完了です。
alertはなくてもjsは機能します。不要なら削除してください。
navigatorが対応していないブラウザもあるので、ifで回避する。
navigatorですが、対応していないブラウザもあるようです。
なので、if文を使って使用できなかった場合は、alertで表示させてあげます。
if(!navigator.clipboard) {
alert('ブラウザが対応していません。お手数ですが、直接クーポンコードを入力してください。');
} 以上で、コードの解説は終了です。
テキストのコピーは、応用することで多様な場面で使用できる。
今回使用した方法は、応用することで多様な場面でも使用することができます。
例えば、textareaに入力されたテキストをコピーしたり、前述したように要素によってコピーのテキストを変更したりなど。
まだ、私は作業中に遭遇していませんので、今回は詳しい記載は避けますが、遭遇したら調べて記録として残そうと思います。