肉うどん

JavaScriptでページのURLをコピーするボタンを設置した（jQuery不使用）

ネットを見ててURLをコピーしたいと思うことがありますよね。たまに「URLをコピーするボタン」があるサイトもあり、いいねと思ったので当サイトにも設置しました。

最初は参考にしたサイトが紹介していたコードをコピーするだけでいいかと思ったんですが、いざ置いてみたら特定環境で動かなかったり、挙動がイマイチ希望に合わない形だったりしたので、ちょっと修正を加えて使っています。

こんな感じのボタンを設置しました。※これは画像なので押せません。

仕様（やりたいこと）

適当にググるとjQueryを使用した例がいくつか出てきますが、このブログはjQueryは完全に排しているので、jQuery不使用のコードを参考にしました。

※参考にしたコードはjQuery不使用とされつつも微妙にjQueryに依存した書き方になっていたのでその部分は修正しています。

ソース

ボタンを置きたいところにHTMLをコピーして貼り、<script>～</script>をページの末尾等に貼るだけで設置できます。スタイルはお好みでどうぞ。

HTML

<input id="copyRadio" type="radio" style="display:none" />
<label for="copyRadio" id="copy-page">この記事のURLをコピーする</label>
<input type="text" id="copyTarget" readonly="readonly" value="<?php echo get_permalink(); ?>" />

※コピー対象のURLはWordPress使用時のものです。他の環境で使用する場合は適宜変更してください。

JavaScript

<script type="text/javascript" language="javascript" async>
document.getElementById("copy-page").onclick = function() {
document.getElementById("copyTarget").style.visibility = "visible";
obj = document.getElementById("copyTarget");
obj.focus();
obj.select();
range = document.createRange();
range.selectNode(obj);
window.getSelection().removeAllRanges();
window.getSelection().addRange(range);
obj.setSelectionRange(0, obj.value.length);
document.execCommand('copy');
document.getElementById("copy-page").innerHTML = "URLをコピーしました";
setTimeout( function(){
document.getElementById("copy-page").innerHTML = "もう一度URLをコピーする";
}, 2000);
}
</script>

（追記）当初、document.write() を使用したコードを記載していましたが、PageSpeed Insightsに document.write() は使うなと怒られたのでコードを修正しました。document.write() はHTML5での使用は非推奨とされているそうです。

CSS

#copy-page {
display: block;
width: auto;
margin: 0 2px;
padding: 7px 0 6px;
font-size: 1rem;
text-align: center;
color: #333;
background: #c7c7c7;
border: none;
border-radius: 3px;
font-weight: bold;
}
#copy-page:hover {
cursor: pointer;
background: #bbb;
}
#copyTarget {
visibility: collapse;
margin: 5px 2px;
padding: 0 5px;
height: 2.5em;
width: calc( 100% - 4px );
border: 2px solid #999;
border-radius: 3px;
}
#copyRadio:checked ~ #copyTarget {
visibility: visible;
}

改修箇所

元のソースから変えたのは主に以下の点です。

サンプルはこのページの下部、「この記事をシェアする」に実際に設置したものをご覧ください。※検索等から来てAMPページが表示されている場合、URLをコピーするボタンは表示されません。その場合は元の記事を参照してください。

参考

この記事をシェアする

最近の記事