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

2018年3月28日 2018年12月14日 WEB

WEBサイト上で任意の文字列をクリップボードにコピーする機能をJavascriptで実装する方法です。
ボタンを押すと指定したテキストをコピーします。

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

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

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

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

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

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

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

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

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

実装方法

追記:2018.12.14
コメントに質問が寄せられたので、HTMLにそのままコピペできるように修正しました
Wixなど、Javascriptを入力する場所がよくわからないホームページ作成サービスで実装する場合、<script></script>で括ってあげるとHTMLコードを入力する場所に入れられます。
Wixは大丈夫でしたけど、他のサービスだと<script>タグが弾かれる可能性がありますのでご注意。

コピペで実装完了です。

デモページ を作りましたので参考にどうぞ。

デモページ

参考サイト

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

 

この記事へのコメント
  1. info@visahb.com より:

    wixでこの機能を入れたいですが、よくできません(泣)JAVAの部分は、どこに入れればいいでしょうか。

    • ナオユ より:

      WixはJavascriptを追記するところが無いのか、よくわからないですよね。
      HTMLと一緒にJSも入力できるように記事のコードを修正しました!(scriptタグで括っただけですけどw)
      一応、Wixで動作確認してOKでした。

  2. えいらい より:

    ありがとう御座います!

    もう一つ質問なのですが

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

    • ナオユ より:

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

  3. えいらい より:

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

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

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

ウェルスナビで損失?