あまり使用する機会もないとは思いますが、今回は「クリップボードへのコピーするボタン」の実装を書いていきます。

当サイトの「コードをクリップボードにコピー」も同じ関数で動いてます。

仕様

1. コピーするボタンをクリックすると、「コピーできました」「コピーに失敗しました」と、アラートが出る。
2. ページへの複数設置が可能。

javascriptのコード

const copybtns = document.getElementsByClassName('copybtn'); // コピーするボタンのクラス名

const clipCopy = () =>{  
  if( copybtns.length > 0 ){
    for(let i = 0; i < copybtns.length ; i++){
      copybtns[i].addEventListener('click', ()=>{
        const copytextarea = document.createElement("textarea");
        const id = copybtns[i].getAttribute('data-copy');
        const copyarea = document.getElementById(id);
        const copytext = copyarea.textContent; 
        copytextarea.textContent = copytext;
        document.body.appendChild(copytextarea);
        copytextarea.select();
        const results = document.execCommand('copy');
        document.body.removeChild(copytextarea);
        if( results ){
          alert('クリップボードにコピーしました。');
        }else{
          alert("コピーに失敗しました。")
        }
      });
    }    
  }
}

clipCopy();

ポップアップでコードを見る

どんな動作をしているか、少し説明していきます。

7行目ではtextareaタグを新しく生成しています。
この textareaタグの中に、コピーするテキスト一度ペーストしてから、textareaタグ内の中身を選択して、コピーするといった流れで、コピーしています。

8行目はクリックした copybtn 要素の data-copy属性値を取得しています。
使い方にも記述しますが、ここのdata-copy属性値はコピーしたい要素のid名を入れてください。

9行目はコピーしたい要素を取得しています。

12行目で7行目で生成したtextareaタグをbodyタグの一番最後に追加しています。

13，14行目でクリップボードにテキストをコピーしてから、
15行目で追加したtextareaタグを削除しています。

htmlのコード、使い方

<span class="copybtn" data-copy="copyarea">クリップボードへコピー</span>

<div id="copyarea">
  <!-- コピーされるエリア -->
</div>

以上が、htmlのコードです。

以下の2点を守ってくれれば、正常に動きます。

1. クラス名「copybtn」要素には「data-copy」属性をつける。
2. 「data-copy」属性の値は、コピーしたい要素のid名をつける。

コピーするボタンのクラス名を変えたい場合は、jsの1行目も合わせて変えて使ってください。