hiromiyablog
hiromiyablog  > プログラミング >  JavaScriptでクリップボードにコピーするボタンを作る方法（複数設置、コピー実行時にテキスト変更可）

JavaScriptでクリップボードにコピーするボタンを作る方法（複数設置、コピー実行時にテキスト変更可）

「JavaScriptでクリップボードにコピーするボタンを作る方法（複数設置、コピー実行時にテキスト変更可）」の画像です。

今回はブログサイトなどでよく見かける「JavaScriptでクリップボードにコピーするボタンを作る方法（複数設置、コピー実行時にテキスト変更可）」を備忘録も兼ねて簡単にまとめました。

クリップボードボタンをクリック時に指定した箇所のテキストをコピーするといった感じのものです！
例えばクーポンコードやブログのタイトルをコピーさせたい時などによく実務では使う機会があったります。

簡単な説明になりますが良ければ参考にしてみて頂けたら幸いです！

目次

JavaScriptでクリップボードにコピーするボタンを作るには？

まずは土台となるHTMLを記述していきます。

その後、土台（HTML）を記述できたらその土台をもとにCSSで「クリップボードコピーボタン」の見た目やテキスト等の装飾を指定し、JavaScriptで「クリップボードコピーボタン」がクリックされた時の動作（処理）を記述していきます。

HTMLを記述していこう

下記のように土台となるHTMLを記述します。

class名やタグの種類などは別のものでも装飾を自身でできる際は大丈夫です！
ただ、class名「js-clipboard-text」、「js-clipboard-button」、「js-clipboard-text-change」は最初に「js」と書かれている通り、後から「JavaScript」で使用するのでこちらで変更した際は「JavaScript」側のclass名も同じ箇所を変更するようご注意ください。

classはできるだけ「CSS」で使用するclass名と「JavaScript」で使用するclass名とで分けて使い、分かりやすいように「JavaScript」で使うclass名には先頭に「js-」のような感じのclass名をつけた方がいいかと思います！

今回のHTMLは最小限の見た目を表現するためのものなので、重要なのはclass名「js-clipboard-text」、「js-clipboard-button」、「js-clipboard-text-change」の組み合わせ（この３つが１セット）なので「JavaScript」側の記述と照らし合わせて参考にしていただけると幸いです。

<div class="clipboard">
  <div class="clipboard__inner">
    <p class="clipboard__text-box">
      <span class="clipboard__text js-clipboard-text">ABC-123-DEF-456</span>
    </p>
    <p class="clipboard__button js-clipboard-button">
      <span class="clipboard__button-text js-clipboard-text-change">クリップボードにコピー１</span>
    </p>
  </div><!-- /.clipboard__inner -->

  <div class="clipboard__inner">
    <p class="clipboard__text-box">
      <span class="clipboard__text js-clipboard-text">GHI-789-JKM-123</span>
    </p>
    <p class="clipboard__button js-clipboard-button">
      <span class="clipboard__button-text js-clipboard-text-change">クリップボードにコピー２</span>
    </p>
  </div><!-- /.clipboard__inner -->
</div><!-- /.clipboard -->

CSSで装飾してクリップボードにコピーするボタンの見た目を作ろう

土台となるHTMLが記述できたら次は土台をもとにCSSで下記のように記述して装飾をし、「クリップボードにコピーするボタン」のデザインを形作っていきます。

装飾が正常にできたらデモページと同様のデザインになりますので参考にしていただけるとありがたいです。

/*--------------------
 clipboard
--------------------*/
.clipboard {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 90%;
  max-width: 300px;
  height: 90%;
  max-height: 230px;
  margin: auto;
  z-index: 100;
}

.clipboard__inner {
  width: 100%;
  margin-bottom: 30px;
}

.clipboard__inner:last-child {
  margin-bottom: 0;
}

.clipboard__text-box {
  position: relative;
  text-align: center;
  margin-bottom: 20px;
}

.clipboard__text {
  display: inline-block;
  color: #333333;
  font-size: 20px;
  font-weight: bold;
  line-height: 30px;
}

.clipboard__button {
  cursor: pointer;
}

.clipboard__button-text {
  display: block;
  color: #FFFFFF;
  font-size: 14px;
  font-weight: bold;
  line-height: 50px;
  text-align: center;
  background-color: #202f55;
  border-radius: 5px;
}

.clipboard__button-text.is-text-change {
  background-color: rgba(32, 47, 85, 0.8);
}

各指定箇所の簡単な説明

簡単に説明しますとまずは下記大枠の部分、class名「clipboard」、「clipboard__inner」、「clipboard__inner:last-child」に関してですが、こちらは全体コンテンツの表示を中央寄せになるようstyleを追加し、中央に表示されるように指定していきます。

※こちらはデモ用に中央寄せにしている部分なのであまり重要な部分ではありません

.clipboard {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 90%;
  max-width: 300px;
  height: 90%;
  max-height: 230px;
  margin: auto;
  z-index: 100;
}

.clipboard__inner {
  width: 100%;
  margin-bottom: 30px;
}

.clipboard__inner:last-child {
  margin-bottom: 0;
}

その後、下記の「clipboard__text-box」、「clipboard__text」の部分で、コピーする箇所のテキストの位置や見た目などのstyleを追加し、コピーするテキストの見た目の部分を指定していきます。

.clipboard__text-box {
  position: relative;
  text-align: center;
  margin-bottom: 20px;
}

.clipboard__text {
  display: inline-block;
  color: #333333;
  font-size: 20px;
  font-weight: bold;
  line-height: 30px;
}

そして、下記の「clipboard__button」、「clipboard__button-text」の部分で、クリップボードにコピーするボタンのstyleを追加し、クリップボードにコピーするボタンの見た目の部分を指定していきます。

.clipboard__button {
  cursor: pointer;
}

.clipboard__button-text {
  display: block;
  color: #FFFFFF;
  font-size: 14px;
  font-weight: bold;
  line-height: 50px;
  text-align: center;
  background-color: #202f55;
  border-radius: 5px;
}

また、上記の見た目をクリップボードにコピーするボタンをクリック時にJavaScriptで「is-text-change」のclassが付与された際に表示を切り替えたい場合、下記のように「is-text-change」のclassが付与されたいのstyleを追加し、表示切り替え部分の指定していきます。

今回は単純に背景色が薄くなるような感じの簡単な変化の指定のみになりますが、下記にCSSの記述を追加したり下記のセレクタに該当する要素の子要素にHTMLを追加して「.is-text-change .追加したい子要素のclass名」などのように、小要素の状態変化を追加して指定することで、ポップアップ的なものなどの追加も理解ができてくると再現できるようになると思いますので色々試してみていただけると幸いです！

.clipboard__button-text.is-text-change {
  background-color: rgba(32, 47, 85, 0.8);
}

JavaScriptを記述してクリップボードにコピーする処理を追加しよう

CSSでの装飾により「クリップボードにコピーするボタン」の見た目はできたもののそれだけではクリックしても何も動作しません。

そこでJavaScriptで「クリップボードにコピーするボタン」をクリック（押し下し）した際に実行したい動作（処理）を追加して、クリップボードに指定箇所のテキストをコピーさせ、表示切り替え用の「is-text-change」のclassが付与されるような処理を下記のように記述し、追加していきます。

// clipboard copy
(function () { // 即時実行関数（グローバル汚染対策）
  let i = 0; // for文用変数の定義
  let el = {}; // 配列・変数用（巻き上げ防止の為、冒頭にて宣言）

  document.addEventListener('DOMContentLoaded', function () {
    // 各セレクタの指定
    el.clipboardButton = document.querySelectorAll('.js-clipboard-button'); // クリップボードコピーボタンのセレクタを指定
    el.clipboardText = document.querySelectorAll('.js-clipboard-text'); // クリップボードにコピーしたいテキストのセレクタを指定
    el.clipboardChangeText = document.querySelectorAll('.js-clipboard-text-change'); // クリップボードコピーボタンテキストの切り替えのセレクタを指定

    // コピー完了時の各種指定
    el.textChangeFlag = true; // コピー完了テキストに書き換えるかを指定（書き換える：true、書き換えない：false）
    el.textChangeClass = 'is-text-change'; // コピー完了テキスト変更時のclass指定
    el.completionText = 'クリップボードにコピーしました'; // コピー完了時のテキストを指定
    el.textReturnToInitialFlag = true; // コピー完了後テキストを一定時間後に書き換え前の状態に戻すか指定（戻す：true、戻さない：false）
    el.textChangeDelay = 3000; // 書き換え前のテキストに戻すまでの間隔（遅延）を指定（ms）

    // クリップボードコピーボタンのイベント処理
    for (i = 0; i < el.clipboardButton.length; ++i) {
      el.clipboardButton[i].addEventListener('click', {
        // 引数と関数をオブジェクトにして渡す
        targetIndex: i, // 現在の該当要素が何番目かの情報を指定
        textChangeFlag: el.textChangeFlag, // コピー完了後テキストに書き換えを指定
        textReturnToInitialFlag: el.textReturnToInitialFlag, // 一定時間後に書き換え前の状態に戻すか指定
        handleEvent: el.clipBoardCopyFnc // 実行する関数を指定
      });
    }
  }, false);

  // クリップボードコピー用関数
  el.clipBoardCopyFnc = function () {
    // 現在こちらの関数が処理実行途中かを判定
    if (el.activeFlag === true) {
      return; // 処理途中の場合はここ以降の処理を中断
    }

    el.activeFlag = true; // 処理を実行判定フラグを実行中に設定
    el.targetIndex = this.targetIndex; // 現在の該当要素が何番目かの情報を変数に格納
    el.clipboardTarget = el.clipboardText[el.targetIndex].textContent; // コピー対象のテキストを取得
    el.currentChangeText = el.clipboardChangeText[el.targetIndex].textContent; // コピー完了後テキストに書き換え前のテキストを取得

    // クリップボードに該当テキストをコピー
    if (navigator.clipboard == undefined) {
      window.clipboardData.setData('Text', el.clipboardTarget); // IE
    } else {
      navigator.clipboard.writeText(el.clipboardTarget); // IE以外
    }

    // コピー完了後テキストに書き換えフラグが「書き換える：true」か判定
    if (this.textChangeFlag) {
      el.clipboardChangeText[el.targetIndex].classList.add(el.textChangeClass); // コピー完了テキスト変更時のclassを付与
      el.clipboardChangeText[el.targetIndex].textContent = el.completionText; // コピー完了後テキストに書き換え
    }

    // 各種フラグが「書き換える：true」および「戻す：true」か判定
    if (this.textChangeFlag && this.textReturnToInitialFlag) {
      setTimeout(function () {
        el.clipboardChangeText[el.targetIndex].classList.remove(el.textChangeClass); // コピー完了テキスト変更時のclassを削除
        el.clipboardChangeText[el.targetIndex].textContent = el.currentChangeText; // コピー完了後テキストに書き換え
        el.activeFlag = false; // 処理を実行判定フラグを初期値に設定
      }, el.textChangeDelay);
    } else {
      setTimeout(function () {
        el.activeFlag = false; // 処理を実行判定フラグを初期値に設定
      }, el.textChangeDelay);
    }
  }
}());

※コメントアウトはわかりやすいように必要以上に細かめに書いているので実際の業務では邪魔かもなので必要に応じて削除して参考にして頂けると幸いです

処理内容の簡単な説明

下記ハイライト部分はコメントアウトにて各所に記述しているとおりで、「初期設定」を指定している箇所になり、「各セレクタの指定」と「コピー完了時の各種指定」の部分をそれぞれコメントアウトを参考に変更する際は変更して調整して見てください。

また、ハイライトされていない「クリップボードコピーボタンのイベント処理」の箇所に関しましてはクリックイベントを定義している箇所になります。
詳細はコメントアウトにて書いてますのでそちらを参考にしてみてください。

※基本的には下記の「各セレクタの指定」と「コピー完了時の各種指定」の部分を変更することである程度は変えられるようにしておりますが、その他の箇所を変更される場合は全体の処理を理解された上で修正しないと機能しなくなる可能性が高いですので変更して使用していただく際はご注意ください

document.addEventListener('DOMContentLoaded', function () {
  // 各セレクタの指定
  el.clipboardButton = document.querySelectorAll('.js-clipboard-button'); // クリップボードコピーボタンのセレクタを指定
  el.clipboardText = document.querySelectorAll('.js-clipboard-text'); // クリップボードにコピーしたいテキストのセレクタを指定
  el.clipboardChangeText = document.querySelectorAll('.js-clipboard-text-change'); // クリップボードコピーボタンテキストの切り替えのセレクタを指定

  // コピー完了時の各種指定
  el.textChangeFlag = true; // コピー完了テキストに書き換えるかを指定（書き換える：true、書き換えない：false）
  el.textChangeClass = 'is-text-change'; // コピー完了テキスト変更時のclass指定
  el.completionText = 'クリップボードにコピーしました'; // コピー完了時のテキストを指定
  el.textReturnToInitialFlag = true; // コピー完了後テキストを一定時間後に書き換え前の状態に戻すか指定（戻す：true、戻さない：false）
  el.textChangeDelay = 3000; // 書き換え前のテキストに戻すまでの間隔（遅延）を指定（ms）

  // クリップボードコピーボタンのイベント処理
  for (i = 0; i < el.clipboardButton.length; ++i) {
    el.clipboardButton[i].addEventListener('click', {
      // 引数と関数をオブジェクトにして渡す
      targetIndex: i, // 現在の該当要素が何番目かの情報を指定
      textChangeFlag: el.textChangeFlag, // コピー完了後テキストに書き換えを指定
      textReturnToInitialFlag: el.textReturnToInitialFlag, // 一定時間後に書き換え前の状態に戻すか指定
      handleEvent: el.clipBoardCopyFnc // 実行する関数を指定
    });
  }
}, false);

そして下記「el.clipBoardCopyFnc = function () {〜}」までの部分が、「クリップボードにコピーするボタン」をクリック（押し下し）した際に処理される内容を記述しております。

下記関数内の各所処理内容はコメントアウトにて各所に記述しておりますので、一通り見ていただいて参考にしていただければ幸いです。

この中身は処理はなんでも構いませんので書き換えれる方は追記したりして違う処理に書き換えて色々応用して活用いただけると幸いです。

※処理を書き換えた際は関数名（clipBoardCopyFncの部分）もそれに見合った関数名に変更してください

// クリップボードコピー用関数
el.clipBoardCopyFnc = function () {
  // 現在こちらの関数が処理実行途中かを判定
  if (el.activeFlag === true) {
    return; // 処理途中の場合はここ以降の処理を中断
  }

  el.activeFlag = true; // 処理を実行判定フラグを実行中に設定
  el.targetIndex = this.targetIndex; // 現在の該当要素が何番目かの情報を変数に格納
  el.clipboardTarget = el.clipboardText[el.targetIndex].textContent; // コピー対象のテキストを取得
  el.currentChangeText = el.clipboardChangeText[el.targetIndex].textContent; // コピー完了後テキストに書き換え前のテキストを取得

  // クリップボードに該当テキストをコピー
  if (navigator.clipboard == undefined) {
    window.clipboardData.setData('Text', el.clipboardTarget); // IE
  } else {
    navigator.clipboard.writeText(el.clipboardTarget); // IE以外
  }

  // コピー完了後テキストに書き換えフラグが「書き換える：true」か判定
  if (this.textChangeFlag) {
    el.clipboardChangeText[el.targetIndex].classList.add(el.textChangeClass); // コピー完了テキスト変更時のclassを付与
    el.clipboardChangeText[el.targetIndex].textContent = el.completionText; // コピー完了後テキストに書き換え
  }

  // 各種フラグが「書き換える：true」および「戻す：true」か判定
  if (this.textChangeFlag && this.textReturnToInitialFlag) {
    setTimeout(function () {
      el.clipboardChangeText[el.targetIndex].classList.remove(el.textChangeClass); // コピー完了テキスト変更時のclassを削除
      el.clipboardChangeText[el.targetIndex].textContent = el.currentChangeText; // コピー完了後テキストに書き換え
      el.activeFlag = false; // 処理を実行判定フラグを初期値に設定
    }, el.textChangeDelay);
  } else {
    setTimeout(function () {
      el.activeFlag = false; // 処理を実行判定フラグを初期値に設定
    }, el.textChangeDelay);
  }
}

注意

今回は「jQuery」を使用せず「JavaScript」のみで記述されていますので「jQuery」が読み込まれていなくても動作します！

なので新規でページ作成の仕事などの場合は、「jQuery」を読み込ませると無駄なリソースになりますので、他の処理などで必要ない場合に限りますが読み込ませなくても大丈夫です。

ただ、既存サイトの修正などの際は他の処理をすべて把握できていないはずですのでその際は勝手に読み込みの記述を消したりしないように注意しましょう！

まとめ

今回は「JavaScriptでクリップボードにコピーするボタンを作る方法（複数設置、コピー実行時にテキスト変更可）」について簡単にはなりますが、HTML・CSS・jQueryでの作り方を説明させていただきました！

「clipboard.writeText」や「addEventListenerで引数と関数をオブジェクトにして渡す」などもでてきたので、知らなかった方やもっと詳しく知りたいという方は下記の外部サイトが参考になるかなと思いますので参考にしてみてください。

参考サイト

clipboard.writeText

Clipboard.writeText() - Web API | MDN

Clipboard インターフェイスの writeText() メソッドは、指定されたテキスト文字列をシステムのクリップボードに書き込みます。テキストは read() または readText() を使って読み戻すことができます。

https://developer.mozilla.org/ja/docs/Web/API/Clipboard/writeText

【JavaScript】クリップボードにテキストをコピーするnavigator.clipboard.writeText()｜yucco

「JavaScript クリップボード コピー」で検索すると、 document.execCommand('copy'); でやる方法がﾁｮｺﾁｮｺ引っかかるのですが、このやり方は現在非推奨で、clipboardを使う方式へ順次移行が進んでいるところ、とのことなので、ナウいやり方をチェックしていきましょう。 順次移行が進んでいるところなので、2021年9月現在、古いブラウザだと動作しなかったり、一…

https://note.com/yucco72/n/n82e147505cbf

JavaScriptのnavigator.clipboard.writeText()でテキストのコピー

テキストフィールドにある文字列を、ボタンクリックしてコピーするスニペットを作りました。 以前jQueryで同じようなスニペットを作りましたが、この記事はその仕様と同じものをネイティブなJavaScriptに書き換えたもの ...

https://dubdesign.net/javascript/clipboard-writetext/

addEventListenerで引数と関数をオブジェクトにして渡す

【JavaScript】addEventListenerで関数に引数をわたす｜MI

JavaScriptでイベントバインド（クリックしたらこの関数が動く、というプログラム）するときには、『addEventListener』をつかうことが多いと思います。 今回は、「addEventListnerで呼び出す関数に『引数』をわたしたい！」という場面で引っかかりました。ググってもパッとわかる解説記事がなかったので、備忘録も兼ねて書いておきます。 ・JavaScriptの基礎がわかる ・J…

https://note.com/yamanoborer/n/n2e4cc40328b7

【JavaScript】addEventListenerにパラメータを渡す方法

本記事では、JavaScriptでaddEventListenerにパラメータを渡す方法をご紹介しています。 上記の疑問にお答えします。 では、解説していきます。 addaddEventListene

https://into-the-program.com/javascript-how-to-set-params-addeventlistener/

デモページ

デモページはこちらになります。

See the Pen クリップボードにコピーするボタンの実装方法 by hiroyuki.miyauchi (@hiromiya) on CodePen.

※各言語ボタンを押し下し、ソースコードをLIVE（リアルタイム）で書き換えて表示・実行結果を確認できます。

最後にもう一度ポイントをおさらい

  • 「CSS」で使用するclass名と「JavaScript・jQuery」で使用するclass名は別に分けて使いわけよう
  • ボタンやコピーする部分のテキストは自身で装飾できるならどんなデザインでもOKなのでカスタマイズしたり自身で作成してみよう
  • ボタンクリック時の表示は「is-text-change」のclassが付与されるようになっており、該当する要素の子要素にHTMLを追加して「.is-text-change .追加したい子要素のclass名」などのように、小要素の状態変化をCSSで追加して指定することで、ポップアップ的なものなどの追加も可能なので色々試してみよう
  • 重要なのはclass名「js-clipboard-text」、「js-clipboard-button」、「js-clipboard-text-change」の組み合わせ（この３つが１セット）なので「JavaScript」側の記述と照らし合わせて考えて参考にしてみよう

初心者向けで簡単な説明でしたが上記内容も踏まえまして、是非自身でのプログラミングにも役立てて頂けると幸いです。

初心者の方にオススメの学習サービス

閲覧履歴

コメントを残す

メールアドレスが公開されることはありません。 ※ が付いている欄は必須項目です

CAPTCHA


PAGE TOP
  • MENU
  • HOME
  • SEARCH
  • PAGE TOP
  • SIDE BAR