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

2018年3月28日 2019年12月22日 WEB制作 JavaScript , jQuery

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

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

1 クリップボードにコピーするボタンが必要な理由
2 クリップボードコピー機能はどんな時に使う？
3 クリップボード機能の実装方法1
4 クリップボード機能の実装方法2

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

ズバリ、スマホだとテキスト選択がめんどくさいからです。
コピーしたい部分だけ選択するのって結構むずかしい。
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>タグが弾かれる可能性がありますのでご注意を。

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

参考サイト１：Javascriptからクリップボードへコピーする方法
参考サイト２：Chrome 43からcutおよびcopyコマンドが使えます

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

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

まず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('このブラウザでは対応していません');
  }
};

デモページ２

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