サンプルコードのセクションでよく目にする「クリップボードにコピー」ボタンは、Document.execCommand() メソッドでテキストをコピーする方法が一般的です。
動作原理
パソコンで特定の文字列をコピーする場合、
- 文字列をドラッグして選択する。
- Mac なら ⌘ + C、Windows なら Ctrl + Cでコピー実行。
という手順を踏みます。
「クリップボードにコピー」ボタンもこれと同じ手順を JavaScript で行います。
- // ID が「id」であるテキストエリアにコピーしたいテキストがある
- var textarea = document.getElementById('id');
- // テキストエリアを選択
- textarea.select();
- // コピーコマンド実行
- document.execCommand('copy');
動作確認はこちらからどうぞ。
clipboard.js
ライブラリで実装することもできます。「clipboard.js」は名前の通りクリップボードにコピーするためのライブラリです。容量は約 3KB と軽量です。CDN または npm で入手できます。
CDN
- <script src="https://cdn.jsdelivr.net/npm/clipboard@2/dist/clipboard.min.js"></script>
npm
- npm install clipboard --save
使い方
HTML5 の data- 属性を利用します。
- <!-- Target -->
- <input id="foo" value="Hello, world.">
-
- <!-- Trigger -->
- <button class="btn" data-clipboard-target="#foo">
- <img src="assets/clippy.svg" alt="Copy to clipboard">
- </button>
そのほかにもいくつか使い方があるので、気になる方は clipboardjs.com をご覧ください。