【iphone,PC対応】クリックで好きな要素をコピーする方法 – jQuery

みなさんこんにちわイチハチブログです。

今回は、jQueryを使用して、クリックするとクリップボードにコピーできるボタンを実装しましたのでメモ日記になります。

まずデモごご覧ください。

デモページ

コピペで使用していただいてOKです！

※今回の記事はこちらのページを参考にさせていただきました。

JavaScriptでクリップボードにコピー（Chrome/Firefox/Safari10〜/IE9〜） - yuw27b’s blog

※2022/4/19追記：ここで使っている仕様は古くなり、非推奨になっているため、新しい記事を書きました。そちらを参照してください。 「クリップボードにコピー」はJavaScriptのみでは不可能だと、昔に思い込んだままだったのですが、HTMLの各種APIとJavaScriptを組み合わせることで、ほとんどのブラウザで...

yuw27b.hatenablog.com

では、早速実装していきます！

HTMLコード

HTMLのソースコードは

<div class="block">
	<p id="copyTarget">こちらをコピーします</p>
	<span id="copyBtn">コピー</span>
</div>

見て分かるように、「コピーをしたいテキストのエリア」と「コピーをおこなうためのボタン」の2つの要素があるだけです。

jQueryコード

次に、jquery の記述になります。
jQueryを使用するので、jqueryを読み込んでいない場合は、こちらを先に読み込む必要があります。

<script src="https://code.jquery.com/jquery-3.3.1.js"></script>

そして下記のコードをコピペしてください。

<script>
function copyText () {
  var $target = document.querySelector('#copyTarget');
  if (!$target) {
    return false;
  }
  var range = document.createRange();
  range.selectNode($target);
  window.getSelection().removeAllRanges();
  window.getSelection().addRange(range);
  document.execCommand('copy');
  return false;
}
document.querySelector('#copyBtn').addEventListener('click', copyText, false);
</script>

以上になります。
あとは、お好きなようなCSSを追加すればあっという間に完成です！

まとめ

コピペで実質的に2分で対応が可能になると思います。
もし同じような機能を実装したい場合は、是非、ご利用ください。