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>