💻

JavaScriptでページのURLをコピーする機能を作ってみる

多くのブログではSNSシェアボタンを設置していてもURLコピーボタンを設置していることは多くないのではないでしょうか。あまり使いみちがなさそうなURLコピーボタンですが、意外とあれば便利です。特にSNSでのシェアやブロガーが他の記事を参考にする際などに重宝されます。そこで今回はjQueryを使わないURLコピーボタンの作り方を紹介します。レスポンシブ対応なのでスマホでも使うことができます。

DEMO : koblog.github.io/demo1.html

ページのURLを取得するコード

まずはHTML・CSSで形を作っていきます。今回はシンプルなデザインにしていますが、CSSを変えることでデザインも自由にカスタマイズできます。

<button type="button" id="copy-page"><span id="cAction">URLをコピー</span></button>

#copy-page {
  display: inline-block;
  width: 160px; /* 幅 */
  padding: 8px 0;
  font-size: 90%; /* 文字のサイズ */
  text-align: center;
  color: #666; /* 文字の色 */
  border: 1px solid #666; /* 枠の色 */
}

最後にJavascriptで機能を追加していきます。関数の内容は参考先の記事を確認してみてください。

<script>
document.getElementById("copy-page").onclick = function() {
  $(document.body).append("<textarea id=\"copyTarget\" style=\"position:absolute; left:-9999px; top:0px;\" readonly=\"readonly\">" +location.href+ "</textarea>");
  let obj = document.getElementById("copyTarget");
  let range = document.createRange();
  range.selectNode(obj);
  window.getSelection().addRange(range);
  document.execCommand('copy');
  document.getElementById("cAction").innerHTML = "Success !";
};
</script>



WEBデザインブログ「Koblog」の管理人。現役高校生。趣味は音楽鑑賞とネットサーフィン・読書。主にWEBデザイン・プログラミング・GatsbyJS・はてなブログ関連のことについて発信していきます。投げ銭をしてくれる方を募集しています。

donation