クリップボードにテキストをコピーするjavascriptをスマホサイトに実装しよう【jQuery無し】

公開日: 2018年3月28日 最終更新日: 2018年5月15日

WEBサイト上で任意の文字列をクリップボードにコピーするボタンを設置するJavascriptです。

仮想通貨のAirDropのサイトなどによく見られますね!

クリップボードにコピーするボタンが必要な理由

ズバリ、スマホだとテキスト選択がめんどくさいからです。

PCならマウスでドラッグしてCTRL+Cですが、スマホでは非常にめんどくさいですよねー。

スマホサイトのユーザビリティ向上に、ぜひ実装したい機能です。

クリップボードコピー機能はどんな時に使う?

  • ECサイトでクーポンコード
  • お問い合わせフォームのチケット番号
  • アフィリエイトのリファラURL

などですかね。
もっと探せば使い道はありそうです。

とにかく、お客さんに面倒くさい入力をさせたい時に、きっと役に立つと思います。

実装方法

ソース

コピペで実装完了です。

サンプル

デモページ

参考サイト

こちらのサイトを参考にさせていただきました。ありがとうございます!

クリップボードにコピーをJSで実装する

Chrome 43からcutおよびcopyコマンドが使えます

 

お気軽にコメントをどうぞ。