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

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

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

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

【あれこれ①】ボタンをクリックして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ではわざわざ使う必要はないのかなと。スマートフォンで問題なく使えればいいのかなと。

さいごに

きのこさん
かわいいのがいいですね
きのこさん
パンおいしそうですね
Author

デザコト

あ、いいな、と思うWebデザインを紹介しています。デザインの参考に。やさしいデザインが多いです。Webデザインギャラリー『デザインのこと - Web design gallery』を運営しています。

Googleさんの
おすすめ

6

/

22

2024

Googleさんの
おすすめ

6

/

22

2024

デザインの記事

EHON HOTEL
  • 2024.06.21New
  • EHON HOTEL
  • 国内、海外のウェブデザイン、パソコン・タブレット・スマートフォンでも見やすいレスポンシブ対応の「あ、いいな」と思うウェブデザインを集めています。
  • デザインのこと – Web design gallery
自主映画『アット・ザ・ベンチ』第2編「まわらない」
【jQuery】ページ内リンクでスムーズスクロール(固定ヘッダーがあったら)