add_to_home_screen
Libra NK

「クリップボードにコピー」を実装する

サンプルコードのセクションでよく目にする「クリップボードにコピー」ボタンは、Document.execCommand() メソッドでテキストをコピーする方法が一般的です。

目次

動作原理

パソコンで特定の文字列をコピーする場合、

  1. 文字列をドラッグして選択する。
  2. Mac なら ⌘ + C、Windows なら Ctrl + Cでコピー実行。

という手順を踏みます。

「クリップボードにコピー」ボタンもこれと同じ手順を JavaScript で行います。

テキストをクリップボードにコピーする
  1. // ID が「id」であるテキストエリアにコピーしたいテキストがある
  2. var textarea = document.getElementById('id');
  3. // テキストエリアを選択
  4. textarea.select();
  5. // コピーコマンド実行
  6. document.execCommand('copy');

動作確認はこちらからどうぞ。

clipboard.js

ライブラリで実装することもできます。「clipboard.js」は名前の通りクリップボードにコピーするためのライブラリです。容量は約 3KB と軽量です。CDN または npm で入手できます。

CDN

  1. <script src="https://cdn.jsdelivr.net/npm/clipboard@2/dist/clipboard.min.js"></script>

npm

  1. npm install clipboard --save
    2.

使い方

HTML5 の data- 属性を利用します。

コピー
  1. <!-- Target -->
  2. <input id="foo" value="Hello, world.">
  3.  
  4. <!-- Trigger -->
  5. <button class="btn" data-clipboard-target="#foo">
  6.     <img src="assets/clippy.svg" alt="Copy to clipboard">
  7. </button>

そのほかにもいくつか使い方があるので、気になる方は clipboardjs.com をご覧ください。