Clipboard APIでコピーボタンを作る

navigator.clipboardの使い方と、失敗したときの扱いです。

writeTextの基本

navigator.clipboard.writeText(文字列)はPromiseを返します。HTTPSなどの安全なコンテキストで、かつボタンのクリックなどユーザー操作の中で呼ぶ必要があります。

失敗に備える

権限が拒否されたり、非対応の環境だと失敗します。try/catchで受け、失敗したことを画面に出してください。古いdocument.execCommand('copy')は非推奨です。

フィードバックを返す

コピーしたら、ボタンの文字を一時的に「コピーしました」に変えると分かりやすくなります。クリップボードの読み取り(readText)は、許可ダイアログが出る点も異なります。

この技術を使っているツール

ほか413本のツールでも使っています。