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

2018年3月28日 2018年8月30日 WEB制作

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

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

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

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

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

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

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

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

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

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

実装方法

ソース

コピペで実装完了です。

サンプル

デモページ

参考サイト

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

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

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

 

ウェルスナビで損失?

コメント

  1. えいらい より:

    ありがとう御座います!

    もう一つ質問なのですが

    コピーした際にポップアップで表示されるのですが
    こちらを表示させたくないのですが、それは可能ですか

    • ナオユ より:

      javascriptの13行目「alert(‘コピーしました’);」の部分を削除すれば出なくなりますよー。

  2. えいらい より:

    copy
    こちらの「copy」部分に画像を入れたいので黒枠を消したいのですがどの様にすれば消えますでしょうか

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

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