今回は指定されたテキストをクリップボードにコピーする方法をまとめていきたいと思います。テキストをカーソルで選択してコピーするのも一つの方法ですが、ボタンのクリックで完結する方がやはり便利ですよね。

クリップボードにコピーするのに「clipboard.js」というライブラリを使う方法もありますが、最小限の要件であればライブラリを使わなくても実装できますので、その形でコードを記述しています。

（参考）
【clipboard.js】
https://clipboardjs.com/

ではコードの方を見ていきます。こちらでは最小限でシンプルな形にしていますので、デザインなどは適宜合わせてください。

【HTML】※一部省略

<input type="text" id="input_copy" value="https://designsupply-web.com/" readonly>
<button id="btn_copy">テキストをコピーする</button>

【javascript】

function txtCopy() {
  const target = document.getElementById('input_copy');
  if (navigator.userAgent.match(/ipad|ipod|iphone/i)) {
    target.readOnly = false;
    const range = document.createRange();
    range.selectNode(target);
    window.getSelection().addRange(range);
    document.execCommand('copy');
    target.readOnly = true;
  } else {
    target.select();
    document.execCommand('copy');
  }
  alert("text copied!!");
}
const trg = document.getElementById('btn_copy');
trg.addEventListener('click',txtCopy);

まずはHTMLから、input要素とbutton要素を設置します。value値をあらかじめ入れておきますが、input要素にはreadonly属性を与えることで入力値を固定できます。

次にJavaScriptでクリップボードにコピーする実装をしていきます。最初にクリップボードにコピーする関数を作成します。ただし、現在iOSではクリップボードの仕様が異なるので実装方法が異なります。ユーザーエージェントで分岐させておきます。

クリップボードにコピーさせるためには、input要素の値を選択する必要がありますので、select()で値を選択状態にさせます。そして、document.execCommand(‘copy’)で選択した値をクリップボードにコピーさせます。この関数をボタンをクリックした時に実行させるようにします。

またiOSの場合ではinput要素がreadonlyになっているとクリップボードにコピーできないようです。コピーする前に一度readonlyを解除し、コピー後にreadonlyへ戻すという作業が必要になります。

実際にサンプルを作成していますので、動作などはこちらで確認できます。サンプルではコピーされたことを通知するためにアラートが表示されるようにしています。

See the Pen textcopy_on_clipboard by designsupply (@designsupply) on CodePen.

ちなみにですが、デザインの都合上、input要素などを見せたくない場合にCSS側で「display: none;」や「visibility: hidden;」「width: 0; height: 0;」などで非表示にしてしまうとコピーできないので注意が必要です。このような場合には「width: 1px; height: 1px; opacity: 0;」というような形で対応するのがいいかと思います。

あまり使うような場面は多くないですが、Webサービスなどでもよく見かける機能ですので、活用してみるのもいいのではないでしょうか。