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

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

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

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

1 仕様（やりたいこと）
2 ソース
3 改修箇所
4 参考

仕様（やりたいこと）

ボタンを押すとコピー完了を示すメッセージが表示される
コピーしたURLも表示される
何回でも押せる
Scriptが動かない環境でも違和感がないようにする

適当にググると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;
}

改修箇所

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

Scriptが動かない環境でボタン押下時、URLの表示のみ行うようにした
.addRange() の前に .removeAllRanges() を追加して、2回目以降に押したときも動作するようにした
iPhone 5c (iOS 10.3.3) でテキスト選択部が動かなかったので、 .setSelectionRange(0,length) などの処理を追加
ボタンを押した2秒後にボタン上のメッセージを戻すようにした
完全に同じメッセージに戻すと押したかどうか分からなくなるので、「もう一度」の文言も付けた
ボタンを押した際に、コピー対象のURLも画面上で見えるようにした

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

参考

この記事をシェアする

この記事のURLをコピーする