Kimama-IT

ITに関する覚書き

【HTML】【JavaScript】クリックした文字列をクリップボードにコピーする。＃2

HTML JavaScript Web

ページ内のリンクをクリックしたときに、リンクの文字をクリップボードにコピーする方法を記載します。

関連記事

コピーした文字をページ内に表示する機能があるバージョンはこちら。
kimama-it.hatenablog.com

目次

概要

  1. コピー対象のテキストをa要素に記載する。
  2. HTML内の全てのa要素を取得する。
  3. a要素をクリックしたら、関数が実行されるようにする。
  4. その関数では、引数にa要素を使用し、a要素のテキストをクリップボードにコピーする。

全構文

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width" />
    <title>テストページ</title>
  </head>
  <body>
    <p>以下のリンクをクリックして、対象の文字をクリップボードにコピーする。</p>
    <a href="javascript:void(0)">foo</a><br />
    <a href="javascript:void(0)">bar</a><br />
    <a href="javascript:void(0)">baz</a><br />

      <!-- 以下、javascriptを記載。bodyタグ内の下部に以下を入力する。  -->
      <script language="javascript" type="text/javascript">

        const aElem = document.querySelectorAll('a');

        aElem.forEach(function(value) {
          value.addEventListener('click', updateClipboard);
        });

        function updateClipboard(event) {
          let copiedText = event.srcElement.innerText;
          navigator.clipboard.writeText(copiedText).then(() => {
            alert(copiedText  + "　をコピーしました。" );
          }, () => {
            alert("コピーに失敗しました。");
          });
        }
      </script>
  </body>
</html>

機能説明

構文１

<a href="javascript:void(0)">foo</a>
<a href="javascript:void(0)">foo</a>
  • ページに「foo」という文字のリンクを表示します。
  • 通常ではリンクをクリックするとページの移動がおこりますが、「href="javascript:void(0)"」とすることでページの移動がおこらなくなります。

構文２

const aElem = document.querySelectorAll('a');
aElem.forEach(function(value) {
  value.addEventListener('click', updateClipboard);
});
document.querySelectorAll('a');
  • 全てのa要素を変数aElemに格納します。
  • aElemは配列の変数になります。
  • 例えば、HTML内にa要素が3つある場合は配列aElemの0～2にそれぞれの格納されます。
forEach();
  • 配列aElemの内容（格納したa要素）を繰り返し取得し、function関数の引数valueに格納します。
addEventListener('click', updateClipboard);
  • 引数value（格納されているa要素）をクリックすると、関数updateClipboardが実行されるようになります。

構文３

function updateClipboard(event) {
  let copiedText = event.srcElement.innerText
  navigator.clipboard.writeText(copiedText).then(() => {
    alert(copiedText  + "　をコピーしました。" );
  }, () => {
    alert("コピーに失敗しました。");
  });
}
function updateClipboard(event)
  • updateClipboardを設定します。
  • 引数eventにはクリックしたa要素の値が格納されます。
let copiedText = event.srcElement.innerText;
  • eventに格納されているa要素のテキストを変数copiedTextに格納します。
.then( () => {}, () => {} );
  • navigator.clipboard.writeText()が成功したら.thenの中の前に位置するの関数が実行され、失敗したら後に位置する関数が実行されます。
  • () => {}はアロー関数という関数の書き方です。

参照したページ

HTML の基本 - ウェブ開発を学ぶ | MDN
Clipboard.writeText() - Web API | MDN
【JavaScript入門】querySelector()によるHTML要素の取得方法まとめ！ | 侍エンジニアブログ
【JavaScript入門】addEventListener()によるイベント処理の使い方！ | 侍エンジニアブログ