コピーボタンのサンプル

HTML

data-copy 属性に、コピーする内容を設定します。（例：サンプルテキスト。このテキストがコピーされます。）

<div class="copy_btn" data-copy="サンプルテキスト。このテキストがコピーされます。">
    サンプルテキストをコピーする
</div>

jQuery

ボタンをクリックしたときに、data-copy 属性に設定された値をクリップボードにコピーする関数を実行します。

<script type='text/javascript' src='//code.jquery.com/jquery-1.12.4.min.js'></script>
<script>
jQuery(function($){

  // 引数をクリップボードにコピーする関数
  function copyTextToClipboard(textVal){

    var copyFrom = document.createElement('textarea');
    copyFrom.textContent = textVal;
    var bodyElm = document.getElementsByTagName('body')[0];
    bodyElm.appendChild(copyFrom);
    
    var retVal=false;
    if (navigator.userAgent.match(/ipad|ipod|iphone/i)) {
      var range = document.createRange();
      range.selectNode(copyFrom);
      window.getSelection().addRange(range);
      retVal = document.execCommand('copy');
    } else {
      copyFrom.select();
      retVal = document.execCommand('copy');
    }
    
    bodyElm.removeChild(copyFrom);
    
    return retVal;
  }

  // クリックしたときの挙動
  $('.copy_btn').click(function(){
    var copy_content = $(this).data('copy');
    var status = copyTextToClipboard(copy_content);
    if( status ){ // コピーが成功した時にボタンの表示を変更する
      $(this).addClass('copied');
      $(this).text('コピーしました。');
    }else{ // コピーが出来なかった時にアラートを表示する
      alert('このブラウザには対応していません。');
    }
  });

});
</script>