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

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

ダウンロード

圧縮ファイルの内容

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

プログラムを実行する

  21: <script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
  22: <script src="https://cdn.jsdelivr.net/clipboard.js/1.5.3/clipboard.min.js"></script>

clipboard.js は jQuery のプラグインである。まず、これらのプログラムを読み込む。

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

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

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

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

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

プログラムを実行する

  82: <!-- 入力フォーム -->
  83: <form name="myform">
  84: <p>
  85: <input type="text" id="str1" size="30" />
  86: <input type="button" id="btn1" value="コピー" data-clipboard-target="str1" />
  87: </p>
  88: <p>
  89: <input type="text" id="str2" size="30" />
  90: <input type="button" id="btn2" value="コピー" data-clipboard-target="str2" />
  91: </p>
  92: ペースト領域<br />
  93: <textarea id="paste" rows="4" cols="40"></textarea>
  94: </p>
  95: </form>

HTML側では、コピー文字列を入れるテキストボックスと、コピーボタンを、ぞれぞれ2個ずつ用意する。
ボタンには、属性 data-clipboard-target として、コピー対象となるオブジェクトを設定する。「jQuery＋clipboardプラグイン」と異なり、ID名でのみ指定できる。

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

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

  60: /**
  61:  * クリップボード・クラス
  62:  * @param   String btn コピー・ボタン名（ID名）
  63:  * @return  なし
  64: */
  65: pahooClipboard = function(btn) {
  66:     var elem = document.getElementById(btn);
  67: 
  68:     //ボタン押下：クリップボードへコピー
  69:     elem.addEventListener('click', function() {
  70:         var target = elem.getAttribute('data-clipboard-target');    //コピー対象
  71:         var text = document.getElementById(target);
  72:         text.select();                              //コピー対象を選択
  73:         document.execCommand('Copy');               //クリップボードへコピー
  74:     }, false);
  75: }

コピーボタンを割り当てる pahooClipboard クラスは、コピー対象を select() メソッドで選び、これを document.execCommand('Copy') メソッドを使ってクリップボードに代入するというものである。
対応しているブラウザは、IE9以降、Edge、Chrome、Firefox、Safari10以降（iOS10以降）となる。

これで、ブラウザ上でコピー＆ペースト機能が実現できる。
なお、jQueryは初期設定のために使っているだけで、pahooClipboard クラスそのものは、JavaScriptだけで動作する。

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