テキストをクリップボードにコピーする方法のあれこれ

クリップボードにコピーする。
簡単かなと思ったけど、とても難しかったです。
ブラウザによって全然挙動が違うことに驚きました。
いろいろ試してみた結果をまとめています。

アドレスをコピーできたらいいなとか、たまにですが

あ、わかります

【あれこれ①】ボタンをクリックしてIDをクリップボードにコピーする

See the Pen
【iOS】ボタンをクリックしてIDをクリップボードにコピーする by 125naroom (@125naroom)
on CodePen.

【あれこれ②】テキストをクリックしてクリップボードにコピーする

See the Pen
【iOS】テキストをクリックしてクリップボードにコピーする by 125naroom (@125naroom)
on CodePen.

【あれこれ③】テキストをクリックしてクリップボードにコピーする、別パターン

See the Pen
【iOS 以外】テキストをクリックしてクリップボードにコピーする by 125naroom (@125naroom)
on CodePen.

【あれこれ④】clipboard.jsを使ってIDとパスワードをクリップボードにコピーする

ファイルをダウンロードする場合は、GitHubから「clipboard.min.js」ファイルをダウンロードする。
CDNを使う場合は、こちらを参照。

See the Pen
【clipboard.js】IDとパスワードをクリップボードにコピーする by 125naroom (@125naroom)
on CodePen.

どれがいいのか

【あれこれ④】を使うのがいい。古いバージョンだと厳しかったりもすると思いますが。
個人的には、PCではわざわざ使う必要はないのかなと。スマートフォンで問題なく使えればいいのかなと。

さいごに

かわいいのがいいですね

パンおいしそうですね