html+javascriptでクリップボードにコピーするまで

html+javascriptでクリップボードにコピー

実現すること
やること
おわり

実現すること

コピーするまでのユーザーの流れは次の通り:

コピーしなくなる文章・数値などが同一ページ内に複数並んでいる。それぞれの内容は異なる。
それら文章・数値などのうちのどれかをクリックしたら、クリップボードに選んだ文章・数値などがコピーされる。

やること

単純にコピー対象の部分をspanで囲み、識別できるようにクラス名を付け、サイトの読み込み時に、addEventListenerを呼ぶだけ。クリップボードにコピーするAPIは最近のブラウザなら大体使える。

こんなhtmlを出力するようにする:

<span class="enable-copy">コピーしたくなる文章数値1<\span>
<span class="enable-copy">コピーしたくなる文章数値2<\span>

どこかでaddEventListenerを呼ぶ:

<head>
<!-- わかりやすくhead内で -->
  <script>
    document.addEventListener("DOMContentLoaded", function() {
      let elements = document.querySelectorAll(".enable-copy");

      elements.forEach(element => element.addEventListener("click", async function() {
        let value = element.innerText;

        try {
          await navigator.clipboard.writeText(value);
          // コピー試行結果を視覚表現する際に使う
          element.classList.add("copied");
          element.classList.remove("failed");
        } catch (err) {
          // 同上
          element.classList.add("failed");
          element.classList.remove("copied");
        }
      }));
    });
  </script>
<\head>

DOMContentLoadedのあとにaddEventListenerを呼ぶことで、要素が存在しない状態で登録しようとしてしまう問題を防ぐ。

これだけでいい。