テキストをクリップボードにコピーするボタンをJavascriptで実装する【jQuery無し】

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

サイト上でボタンを1クリックするだけで、任意の文字列をクリップボードにコピーする機能をJavascriptで実装する方法です。

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

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

ズバリ、スマホだとテキスト選択がめんどくさいからです。
コピーしたい部分だけ選択するのって結構むずかしい。
PCならマウスでドラッグするだけですが、スマホは非常にめんどくさいですよねー。

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

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

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

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

ユーザーに面倒くさい入力をさせたい時にきっと役に立つと思います。

実装方法

<p><span class="js-copytext">hoge@example.com</span></p>
<p><button class="js-copybtn">copy</button></p>

<script>
var copyEmailBtn = document.querySelector('.js-copybtn');
copyEmailBtn.addEventListener('click', function(event) {
    // .js-copytextのテキストを選択
    var copyText = document.querySelector('.js-copytext');
    var range = document.createRange();
    range.selectNode(copyText);
    window.getSelection().addRange(range);
    try {
        // テキストを選択したらクリップボードにコピーする
        var successful = document.execCommand('copy');
        var msg = successful ? 'successful' : 'unsuccessful';
        console.log('Copy command was ' + msg);
        alert('コピーしました');
    } catch(err) {
        console.log('Oops, unable to copy');
    }
    // 選択状態を解除する
    window.getSelection().removeAllRanges();
});
</script>
追記:2018.12.14
コメントに質問が寄せられたので、HTMLにそのままコピペできるように修正しました
Wixなど、Javascriptを入力する場所がよくわからないホームページ作成サービスで実装する場合、<script>...</script>で括ってあげるとHTMLコードを入力する場所に入れられます。
Wixは大丈夫でしたけど、他のサービスだと<script>タグが弾かれる可能性がありますのでご注意を。

コピペで実装完了です。

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

デモページ

参考サイト

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

 

この記事へのコメント
  1. dan より:

    スマホでもできるソースを探してました。
    情報ありがとうございます!

    • ナオユ より:

      Androidでマイナンバーカードを読み取れるので、便利っちゃ便利なシステムなんですけどね!
      必要なアプリが多すぎですけど…

  2. info@visahb.com より:

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

    • ナオユ より:

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

  3. えいらい より:

    ありがとう御座います!

    もう一つ質問なのですが

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

    • ナオユ より:

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

  4. えいらい より:

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

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

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

ウェルスナビで損失?