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

2018年3月28日 2019年12月22日 WEB ,

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

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

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

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

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

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

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

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

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

クリップボード機能の実装方法1

<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>タグが弾かれる可能性がありますのでご注意を。

コピペで実装完了です。
デモページ を作りましたので参考にどうぞ。

クリップボード機能の実装方法2

実装方法1で紹介したコードよりも、こちらの方が良さそうです。

まずJavascriptで独自関数を定義します。

function execCopy(string){

  // 空div 生成
  var tmp = document.createElement("div");
  // 選択用のタグ生成
  var pre = document.createElement('pre');

  // 親要素のCSSで user-select: none だとコピーできないので書き換える
  pre.style.webkitUserSelect = 'auto';
  pre.style.userSelect = 'auto';

  tmp.appendChild(pre).textContent = string;

  // 要素を画面外へ
  var s = tmp.style;
  s.position = 'fixed';
  s.right = '200%';

  // body に追加
  document.body.appendChild(tmp);
  // 要素を選択
  document.getSelection().selectAllChildren(tmp);

  // クリップボードにコピー
  var result = document.execCommand("copy");

  // 要素削除
  document.body.removeChild(tmp);

  return result;
}

関数を実行する処理を続けて書きます。

var textarea = document.getElementById('textarea');
var button = document.getElementById('button');

button.onclick = function(){
  if(execCopy(textarea.value)){
    alert('コピーできました');
  }
  else {
    alert('このブラウザでは対応していません');
  }
};

デモページ2

こちらのサイトを参考にさせていただきました。

この記事へのコメント
  1. ぱらちゃん より:

    ブログに実装しました。JSとかまったく不勉強なので、非常に助かりました。ありがとうございました!!

  2. dan より:

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

  3. info@visahb.com より:

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

    • ナオユ より:

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

  4. えいらい より:

    ありがとう御座います!

    もう一つ質問なのですが

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

    • ナオユ より:

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

  5. えいらい より:

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

コメントを残す

メールアドレスが公開されることはありません。

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

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

このサイトの管理者

ナオユ

Wordpress初心者向けにカスタマイズ方法やWEB制作のノウハウをポロッとまとめています。広告代理店→WEB制作会社→リモート勤務になり在宅ワークしながらアフィリエイトなど副業に挑戦中|子ども大好き新米パパ@H29男児|フラット35で実家を建て直し親と同居|仮想通貨投資(絶賛含み損w)