Javascriptで指定したテキストをコピーするボタンを作成する。

案件で「特定の要素をクリックしたら、指定したテキストをクリップボードにコピーする。」という機能を実装することがあったので、備忘録として残します。
簡単に言うと、要素（ボタンや画像）をクリックしたら、テキストをコピーして、すぐに貼り付けられる状態にしたい！ということです。

私が対応した案件は、LPでクーポンコードが記載された画像をクリックすると、クーポンコードがコピーされる！といったものでした。
多様なサイトで見かける機能なので、覚えておくと制作効率向上につながりそうです！
さらに、サイトの利便性も向上します。

特定の要素をクリックしたらコピーさせるためのコード。

最初にコードを記述しておきます。

<a class="click_area">ここをクリックしてください。</a>

const clickTargets = document.getElementsByClassName('.click_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を使ってクリップボードにテキストをコピーする。

ここまでで、以下の内容が完了しました。

1. 特定の要素を取得
2. どの要素がクリックされたか判定
3. 発火タイミング

あとは、動作処理を特定してあげるだけです。

今回は、以下のコードで実装しています。

navigator.clipboard.writeText(code);

そして、コピーされたのがわかるように

alert('クーポンコード(' + code +')がコピーされました。');

としてあげれば完了です。

alertはなくてもjsは機能します。不要なら削除してください。

navigatorが対応していないブラウザもあるので、ifで回避する。

navigatorですが、対応していないブラウザもあるようです。

なので、if文を使って使用できなかった場合は、alertで表示させてあげます。

if(!navigator.clipboard) {
  alert('ブラウザが対応していません。お手数ですが、直接クーポンコードを入力してください。');
}

以上で、コードの解説は終了です。

テキストのコピーは、応用することで多様な場面で使用できる。

今回使用した方法は、応用することで多様な場面でも使用することができます。

例えば、textareaに入力されたテキストをコピーしたり、前述したように要素によってコピーのテキストを変更したりなど。

まだ、私は作業中に遭遇していませんので、今回は詳しい記載は避けますが、遭遇したら調べて記録として残そうと思います。

最後になりましたが、jQueryでも同じことができます！

追記：jQueryでの実装方法

本記事のコードをjQueryで書き換えてみました！

簡単に記述できるので、jQueryが使用できる環境であれば、こちらを使う方法もありです。

クリックしたあとに、コードがコピされているか、適当なとこに貼り付けて確認してみてください。