jQueryでテキストコピーボタンを数行で実装する手順

ボタンを押すと、テキストがコピーされる的な・・・
そういうボタンを作りたいことってないですか?

実を言うと、jQuery ならそういうのでも数行くらいで作れます。

ここでは忘備録も兼ね、そういうテキストコピーボタンを jQuery で作る手順まとめました。

長いテキストをストレスなくコピーしてもらいたいとか、そういう時に役立つはずです。

手順1.まずはjQueryを読み込もう

まず jQuery が必須なので、最低限読み込み

あとレイアウト調整に便利なので Bootstrap とかも読み込んどきます。(任意)

やっぱりCDNでインクルードするのが楽です。

 

あともしCDNじゃなくて、直読みしたいなどの場合・・・

次の公式サイトから直ダウンロードもできます。

どっちで読み込むかはお好きな方でどうぞ

必要なら FontAwesome も入れておとくと便利

あとこれは必ずってわけじゃないんですが、、、

ボタンのアイコンをカスタマイズするなら FontAwesome も必要です。

あとボタン用のアイコンは次ページから色々探せます。

アイコン検索 : https://fontawesome.com/icons

検索で "clip" とか "clipboard" で検索すれば、よさげなアイコンが見つかるはず

手順2.コピーテキストボタンを用意&実装

そうしたら次に、テキスト要素とボタン要素を用意します。

ボタンがクリックされたら、その横のテキストがコピーされる的なイメージ

 

例えば APIキー みたいな超長いテキストをコピー対応させたいとしましょう。

その場合を例に出すなら、次のようなタグを用意してください。(Bootstrap使用)

このタグで重要なポイントは次の3つ

  • 必ず全体をdivタグで囲んで親要素を作る
  • テキスト要素に text  クラスを付与
  • ボタンには copy-text-btn  クラスを付与

これ以外のテキストとか、アイコンは好きに改変してOKです。

 

そうしたら最後に、コピーボタンがクリックされたときの処理を追加

ボタンがクリックされたら、
その親要素内部の text  クラスを持つ要素を selectAllChildren  でテキスト選択

そのあとに document.execCommand("copy");  を実行するだけです。

 

あとコメントにも書いた通り、
コピー完了後は何か通知的なものを出すと親切ですね。

アラートもいいけど少しダサいので、トースト通知するとカッコいいかも

▼もしそういうトースト表示したいなら、Toastr を使うのがオススメ

上記事で使い方は解説したので、良ければご覧ください。

 

そんなこんなで、コピーテキストボタンの完成!

実際の見た目はこんな感じです(ただし Bootstrap 使用)

jQueryで実装したコピーテキストボタンのサンプル。右のクリップボードアイコンを押すと、実際にコピーされる

なんかそれっぽくないですか?それっぽですよね?笑

 

実際に横のボタンを押すと、
クリップボードにコピーされ、テキストも選択されます。

▼実際にコピーボタンを押したときの様子

コピーテキストボタンを実際にクリックしたときの様子

ただ単純にコピーするだけでなく、
コピーしたことがはっきり分かるとユーザー的に親切だと思います。

ここまでのまとめ

ここまでが jQuery で作れるコピーボタンの実装方法

僕自身、ダラダラと長いテキストとかを手動でコピーするのは嫌いです。

そういう機会損失をなくすのに、コピーテキストボタンが役立つかもしれません。

以上、jQueryでコピーテキストボタンを実装する手順でした。それではバイバイ(^_^)/~

Commentsこの記事についたコメント

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA


このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください