Webページでテキストをクリップボードにコピーさせる実装はよくあると思うのですが、なぜか動かなかったのでメモ。HTMLは以下のような感じ。

<textarea id="txtCopy" readonly>「YOASOBI DOME LIVE」
■大阪公演
xx月xx日(土) 京セラドーム大阪
開場 15:30 / 開演 18:00

■東京公演
xx月xx日(土) 東京ドーム
開場 15:30 / 開演 18:00</textarea>
<button id="btnCopy">ライブ情報をコピーする</button>

JavaScriptは以下のようにしました。

const txtCopy = document.getElementById('txtCopy');
const btnCopy = document.getElementById('btnCopy');
btnCopy.addEventListener('click', () => {
 if (!navigator.clipboard) {
  console.log('コピー出来ません',navigator.clipboard);
  return;
 }
 navigator.clipboard.writeText(txtCopy.value).then(
 () => { alert('ライブ情報をコピーしました'); },
 () => { alert('ライブ情報のコピーに失敗しました'); });
});

こちらインターネットにアップしたWebサーバ上だと動いたのに、なぜかlocalhostで動かそうと思ったら動かずnavigator.clipboardがundefinedとなっていました。実はこのAPIはhttp（非SSL）では動かず、https環境下でのみ動作します。

http（非SSL）でクリップボードコピーを実装する

httpでもexecCommand('copy')を使えばクリップボードへのコピーが使えます。しかし、このメソッドは現在非推奨です。

const txt = document.getElementById('txtCopy');
const btn = document.getElementById('btnCopy');
btn.addEventListener('click', () => {
 txtCopy.select();
 document.execCommand('copy');
 alert('ライブ情報をコピーしました');
});

現在はほぼhttpsで運用するケースが多いともうので、よほどのことがない限りはnavigator.clipboard.writeTextを使いましょう。

おしまい♥