なんにもない日の頭の中はこんなもんだったりする

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

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

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

きのこさん
アドレスをコピーできたらいいなとか、たまにですが
きのこさん
あ、わかります

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

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

ブラウザ コピーできる?
IE
Edge
Firefox
Chrome
Safari
iOS Safari
Android △(機種によってできたりできなかったり)

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

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

ブラウザ コピーできる?
IE
Edge 複数は×(リロードすればコピーはできるが)
Firefox
Chrome
Safari
iOS Safari
Android △(機種によってできたりできなかったり)

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

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

ブラウザ コピーできる?
IE
Edge
Firefox
Chrome
Safari
iOS Safari 複数は×(リロードすればコピーはできるが)
Android

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

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

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

ブラウザ コピーできる?
IE
Edge
Firefox
Chrome
Safari
iOS Safari
Android

どれがいいのか

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

さいごに

きのこさん
かわいいのがいいですね
きのこさん
パンおいしそうですね
いつかのこと
Web design gallery - デザインのこと - ウェブデザインあつめました。

おすすめ

Web design gallery - デザインのこと - ウェブデザインあつめました。