プログラミング

【PR】

【JavaScript】テキストをクリップボードにコピーする方法

テキストをクリップボードにコピーする方法

JavaScriptでWebブラウザのクリップボード API navigator.clipboard.writeText()を使用してクリップボードにテキストをコピーする方法を紹介します。

また、ブラウザがクリップボード APIに対応していない場合の対応策も紹介してます。

クリップボード APIでクリップボードにテキストをコピーする

【サンプル】クリップボード APIでクリップボードにテキストをコピー

「コピー」ボタンをクリックするとテキストをコピーできます。

このテキストをクリップボードにコピー

クリップボードにコピーできているか確認したい場合は、下記に貼り付けてください。

【実装コード】クリップボード APIでクリップボードにテキストをコピー

HTML
Copy
  1. <div class="copy-box">
  2.   <div id="js-copy-txt" class="copy-txt">このテキストをクリップボードにコピー</div>
  3.   <button id="js-copy-btn" class="copy-btn">コピー</button>
  4. </div>
CSS
Copy
  1. .copy-box {
  2.   display: flex;
  3.   column-gap: 10px;
  4. }
  5.  
  6. .copy-btn {
  7.   padding: 0.2em 0.8em;
  8.   color: #fff;
  9.   background: #fdbe71;
  10.   border: none;
  11.   border-radius: 3px;
  12.   cursor: pointer;
  13. }
JavaSctipt
Copy
  1. let copyBtn = document.getElementById('js-copy-btn');
  2. copyBtn.addEventListener('click', click_copy_btn, false);
  3.  
  4. function click_copy_btn() {
  5.   //コピーするテキストを取得
  6.   let getTxt = document.getElementById('js-copy-txt').innerText;
  7.  
  8.   //取得したテキストをクリップボードに書き込み
  9.   navigator.clipboard.writeText(getTxt);
  10. }

navigator.clipboard.writeText()使用時の注意事項

navigator.clipboard.writeText()は、基本的にほとんどのモダンブラウザで対応してますが、比較的最近実装されたAPIのため古いブラウザで対応してない場合があります。

navigator.clipboard.writeText()のブラウザの互換性についてはこちらからご確認ください。

ブラウザがクリップボード APIに対応していない場合の対応策

navigator.clipboard.writeText()が効かない場合、現在非推奨になっているexecCommand('copy')を使用することで、対応可能な場合があります。

execCommand('copy')はブラウザが提供する編集可能な要素（<textarea></textarea>など）のテキストをクリップボードにコピーすることができます。

非推奨になった理由

  1. セキュリティ上の懸念
    execCommand('copy')はJavaScriptから直接クリップボードにアクセスすることができます。そのため、悪意あるスクリプトがユーザーのクリップボードの内容を読み取ることができるというセキュリティ上の脆弱性があります。

  2. ブラウザの互換問題
    execCommand('copy')は全てのブラウザで互換性があるわけではなく、一部ブラウザで使用できない場合があります。

  3. 非標準
    execCommand()自体が非標準のAPIであり、W3Cの公式な仕様として定義されていません。ブラウザ間での挙動の統一性がなく、互換性や安定性の問題が生じる可能性があります。

  4. 代替手段の登場
    新しいクリップボードAPI navigator.clipboard.writeText()が導入され、クリップボードへのアクセスを制御し、安全性が向上してます。

【サンプル】execCommand('copy')でクリップボードにテキストをコピー

「コピー」ボタンをクリックするとテキストをコピーできます。

このテキストをクリップボードにコピー

クリップボードにコピーできているか確認したい場合は、下記に貼り付けてください。

【実装コード】execCommand('copy')でクリップボードにテキストをコピー

execCommand('copy')は、ブラウザが提供する編集可能な要素（<textarea></textarea>など）にテキストが記載されている必要があります。

そのため、今回の実装コードではJavaScriptで一時的に<textarea>タグを作成して、クリップボードにテキストをコピーします。

HTML
Copy
  1. <div class="copy-box">
  2.   <div id="js-copy-txt2" class="copy-txt">このテキストをクリップボードにコピー</div>
  3.   <button id="js-copy-btn2" class="copy-btn">コピー</button>
  4. </div>
CSS
Copy
  1. .copy-box {
  2.   display: flex;
  3.   column-gap: 10px;
  4. }
  5.  
  6. .copy-btn {
  7.   padding: 0.2em 0.8em;
  8.   color: #fff;
  9.   background: #fdbe71;
  10.   border: none;
  11.   border-radius: 3px;
  12.   cursor: pointer;
  13. }
JavaSctipt
Copy
  1. let copyBtn2 = document.getElementById('js-copy-btn2');
  2. copyBtn2.addEventListener('click', click_copy_btn2, false);
  3.  
  4. function click_copy_btn2() {
  5.   //コピーするテキストを取得
  6.   let getTxt = document.getElementById('js-copy-txt2').innerText;
  7.  
  8.   //textareaを一時的に作成してテキストを設定
  9.   let textarea = document.createElement('textarea');
  10.   textarea.value = getTxt;
  11.  
  12.   //textareaをDOMに追加
  13.   document.body.appendChild(textarea);
  14.  
  15.   //textareaを選択してクリップボードにコピー
  16.   textarea.select();
  17.   document.execCommand('copy');
  18.  
  19.   //textareaを削除
  20.   document.body.removeChild(textarea);
  21. }

個人メモ

コピーボタンの上に「コピー完了」の吹き出しを表示する

【サンプル】コピーボタンの上に「コピー完了」の吹き出しを表示

このテキストをクリップボードにコピー

【実装コード】コピーボタンの上に「コピー完了」の吹き出しを表示

HTML
Copy
  1. <div class="copy-box">
  2.   <div id="js-copy-txt3" class="copy-txt">このテキストをクリップボードにコピー</div>
  3.   <button id="js-copy-btn3" class="copy-btn">コピー</button>
  4. </div>
CSS
Copy
  1. .copy-box {
  2.   display: flex;
  3.   column-gap: 10px;
  4. }
  5.  
  6. .copy-btn {
  7.   padding: 0.3em 0.8em;
  8.   color: #fff;
  9.   background: #fdbe71;
  10.   border: none;
  11.   border-radius: 3px;
  12.   cursor: pointer;
  13.   position: relative;
  14. }
  15.  
  16. .copy-btn::before {
  17.   content: 'コピー完了';
  18.   width: 7em;
  19.   padding: 0.3em 0;
  20.   text-align: center;
  21.   font-size: 13px;
  22.   background: #555;
  23.   border-radius: 5px;
  24.   opacity: 0;
  25.   position: absolute;
  26.   top: calc(-100% - 6px);
  27.   right: 0;
  28.   pointer-events: none;
  29.   z-index: 3;
  30. }
  31.  
  32. .copy-btn::after {
  33.   content: '';
  34.   width: 8px;
  35.   height: 8px;
  36.   background: #555;
  37.   opacity: 0;
  38.   position: absolute;
  39.   top: calc(-100% + 17px);
  40.   right: 8px;
  41.   transform: rotate(45deg);
  42.   pointer-events: none;
  43.   z-index: 2;
  44. }
  45.  
  46. .copy-btn.-add-fukidashi::before,
  47. .copy-btn.-add-fukidashi::after {
  48.   opacity: 1;
  49. }
  50.  
JavaSctipt
Copy
  1. let copyBtn3 = document.getElementById('js-copy-btn3');
  2. copyBtn3.addEventListener('click', click_copy_btn3, false);
  3.  
  4. let fukidashiTimer;
  5.  
  6. function click_copy_btn3() {
  7.   //コピーするテキストを取得
  8.   let getTxt = document.getElementById('js-copy-txt3').innerText;
  9.  
  10.   //取得したテキストをクリップボードに書き込み
  11.   navigator.clipboard.writeText(getTxt);
  12.  
  13.   //js-copy-btn3に吹き出しを表示するためのclassを追加
  14.   if (copyBtn3.classList.contains('-add-fukidashi')) {
  15.     copyBtn3.classList.remove('-add-fukidashi');
  16.     copyBtn3.classList.add('-add-fukidashi');
  17.  
  18.     //前回のタイマーをクリア
  19.     clearTimeout(fukidashiTimer);
  20.  
  21.     fukidashiTimer = setTimeout(function () {
  22.       copyBtn3.classList.remove('-add-fukidashi');
  23.     }, 2000);
  24.   } else {
  25.     copyBtn3.classList.add('-add-fukidashi');
  26.  
  27.     fukidashiTimer = setTimeout(function () {
  28.       copyBtn3.classList.remove('-add-fukidashi');
  29.     }, 2000);
  30.   }
  31. }

クリップボード APIが使用できるかJavaScriptで確認（判定）する

【サンプル】クリップボード APIが使用できるかJavaScriptで確認

このテキストをクリップボードにコピー

【実装コード】クリップボード APIが使用できるかJavaScriptで確認

HTML
Copy
  1. <div class="copy-box">
  2.   <div id="js-copy-txt4" class="copy-txt">このテキストをクリップボードにコピー</div>
  3.   <button id="js-copy-btn4" class="copy-btn">コピー</button>
  4. </div>
CSS
Copy
  1. .copy-box {
  2.   display: flex;
  3.   column-gap: 10px;
  4. }
  5.  
  6. .copy-btn {
  7.   padding: 0.2em 0.8em;
  8.   color: #fff;
  9.   background: #fdbe71;
  10.   border: none;
  11.   border-radius: 3px;
  12.   cursor: pointer;
  13. }
JavaSctipt
Copy
  1. let copyBtn4 = document.getElementById('js-copy-btn4');
  2. copyBtn4.addEventListener('click', click_copy_btn4, false);
  3.  
  4. function click_copy_btn4() {
  5.   if (navigator.clipboard) {
  6.     console.log('クリップボード APIが利用可能です。');
  7.   } else {
  8.     console.log('クリップボード APIは利用できません。');
  9.   }
  10. }

HTMLとCSSの知識がありJavaScriptを学びたいという方におすすめの1冊

アイコン画像

もみじ

HTMLとCSSの知識がありJavaScriptを学びたいという方に入門書としておすすめの書籍です。

実務で役立つサンプルを手を動かしながら学ぶことができ、実践的なスキルを身に付けることができます。

JavaScriptのフロントエンドエンジニアを目指している方におすすめの1冊

アイコン画像

もみじ

この本はJavaScript初心者からフロントエンドエンジニアを目指す方にぴったりの1冊です。

非同期処理やAJAXなど、現代の開発で必要なスキルがわかりやすく解説されており、実務で役立つスキルを学ぶことができます。

-プログラミング
-, ,