【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さんの
おすすめ

11

/

25

2024

Googleさんの
おすすめ

11

/

25

2024

デザインの記事

マカダミア ホワイトスノー モカ|スターバックス コーヒー
映画『アット・ザ・ベンチ』
【jQuery】スライダープラグイン「slick」実装サンプル集