JavaScriptでクリップボードを使う

ブラウザ上でテキストボックスの内容をクリップボードにコピーする方法として「ZeroClipboardでクリップボードを使う」を紹介したが、Flashを利用するプログラムであるため、2018年（平成30年）現在、デフォルト状態で使えなくなっているブラウザが出てきている。
そこで今回は、Flashを使わず、jQuery＋clipboardプラグインを使うものと、JavaScriptでネイティブに書く方法の2種類を紹介する。

（2025年4月12日）clipboard3.html を clipboard.js のみを使うように改良, clipboard3.html を IE11対応にした．

ダウンロード

圧縮ファイルの内容

clipboard2.html	サンプル・プログラム本体（jQuery版）
clipboard3.html	サンプル・プログラム本体（JS版）

clipboard2.html 更新履歴

バージョン	更新日	内容
1.1.0	2025/04/12	clipboard.js のみを使うように改良
1.0	2018/12/18	初版

clipboard3.html 更新履歴

バージョン	更新日	内容
1.1.0	2025/04/12	IE11対応, 閉じタグを最新に
1.0	2018/12/18	初版

プログラムを実行する

clipboard2.html

  21: <script src="https://unpkg.com/clipboard@2/dist/clipboard.min.js"></script>

clipboard.js を読み込む。

clipboard2.html

  64: <!-- 入力フォーム -->
  65: <form name="myform">
  66: <p>
  67: <input type="text" id="str1" size="30">
  68: <input type="button" id="btn1" value="コピー" data-clipboard-target="#str1">
  69: </p>
  70: <p>
  71: <input type="text" id="str2" size="30">
  72: <input type="button" id="btn2" value="コピー" data-clipboard-target="#str2">
  73: </p>
  74: ペースト領域<br>
  75: <textarea id="paste" rows="4" cols="40"></textarea>
  76: </p>
  77: </form>

HTML側では、コピー文字列を入れるテキストボックスと、コピーボタンを、ぞれぞれ2個ずつ用意する。
ボタンには、属性 data-clipboard-target として、コピー対象となるオブジェクトを設定する。ここではID名で指定している。

clipboard2.html

  28:     // 初期値
  29:     DEF_STR1 = 'hello! pahoo';          // コピー文字列（その1）
  30:     DEF_STR2 = 'ようこそ！ぱふぅ家へ';  // コピー文字列（その2）
  31:     DEF_BTN1 = '#btn1';                 // コピーボタン（その1）
  32:     DEF_BTN2 = '#btn2';                 // コピーボタン（その2）
  33: 
  34:     // コピー文字列の設定
  35:     document.getElementById('str1').value = DEF_STR1;
  36:     document.getElementById('str2').value = DEF_STR2;
  37: 
  38:     // コピーボタンの設定
  39:     new ClipboardJS(DEF_BTN1);
  40:     new ClipboardJS(DEF_BTN2);

JavaScript側では、テキストボックスに入れる文字列と、ボタンに ClipboardJSクラスを割り当てる。

これだけで、ブラウザ上でコピー＆ペースト機能が実現できる。

プログラムを実行する

clipboard3.html

  95: <!-- 入力フォーム -->
  96: <form name="myform">
  97: <p>
  98: <input type="text" id="str1" size="30">
  99: <input type="button" id="btn1" value="コピー" data-clipboard-target="str1">
 100: </p>
 101: <p>
 102: <input type="text" id="str2" size="30">
 103: <input type="button" id="btn2" value="コピー" data-clipboard-target="str2">
 104: </p>
 105: ペースト領域<br>
 106: <textarea id="paste" rows="4" cols="40"></textarea>
 107: </p>
 108: </form>

HTML側では、コピー文字列を入れるテキストボックスと、コピーボタンを、ぞれぞれ2個ずつ用意する。
ボタンには、属性 data-clipboard-target として、コピー対象となるオブジェクトを設定する。

clipboard3.html

  27:     // 初期値
  28:     DEF_STR1 = 'hello! pahoo';          // コピー文字列（その1）
  29:     DEF_STR2 = 'ようこそ！ぱふぅ家へ';  // コピー文字列（その2）
  30:     DEF_BTN1 = 'btn1';                  // コピーボタン（その1）
  31:     DEF_BTN2 = 'btn2';                  // コピーボタン（その2）
  32: 
  33:     // コピー文字列の設定
  34:     document.getElementById('str1').value = DEF_STR1;
  35:     document.getElementById('str2').value = DEF_STR2;
  36: 
  37:     // コピーボタンの設定
  38:     new pahooClipboard(DEF_BTN1);
  39:     new pahooClipboard(DEF_BTN2);

JavaScript側では、テキストボックスに入れる文字列と、ボタンに pahooClipboard クラスを割り当てる。

clipboard3.html

  58: /**
  59:  * クリップボード・クラス
  60:  *    IE11対応のため無名関数で記述
  61:  * @param   String btn コピー・ボタン名（ID名）
  62:  * @return  なし
  63: */
  64: pahooClipboard = function(btn) {
  65:     var elem = document.getElementById(btn);
  66: 
  67:     // ボタン押下：クリップボードへコピー
  68:     elem.addEventListener('click', function() {
  69:         let target = elem.getAttribute('data-clipboard-target');    // コピー対象
  70:         let elem2  = document.getElementById(target);
  71:         let text   = elem2.value;
  72: 
  73:         // IE以外（navigator.clipboard 実装済）
  74:         if (navigator.clipboard) {
  75:             navigator.clipboard.writeText(text);
  76:             console.log('navigator.clipboard');
  77:         // IE
  78:         } else if (window.clipboardData) {
  79:             window.clipboardData.setData('Text', text);
  80:             console.log('window.clipboardData');
  81:         // それ以外：execCommand('Copy')実行（ただし非推奨機能）
  82:         } else {
  83:             elem2.select();
  84:             document.execCommand('Copy');
  85:             console.log('execCommand');
  86:         }
  87:     }, false);
  88: }

コピーボタンを割り当てる pahooClipboard クラスは、コピー対象を select() メソッドで選び、モダン・ブラウザに用意されている Navigator.clipboard プロパティを利用する。このプロパティが用意されていない IE11では、window.clipboardData プロパティを利用する。それも用意されていない特殊なブラウザでは、Copyコマンドを直接実行する。
これで、ブラウザ上でコピー＆ペースト機能が実現できる。

• ZeroClipboardでクリップボードを使う：ぱふぅ家のホームページ