<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
// リンクをクリックしたときのイベントハンドラを登録する
$(document).on("click", "a", function(e) {
// デフォルトの動作（リンク先に移動する）をキャンセルする
e.preventDefault();
// クリックしたリンクのhref属性を取得する
var href = $(this).attr("href");
// クリックしたリンクのid属性を取得する
var id = $(this).attr("id");
// id属性が指定されたものだけコピーする
if (id == "copy1" || id == "copy2" || id == "copy3") {
// href属性をコピーするための一時的なテキストエリアを作成する
var textarea = document.createElement("textarea");
// テキストエリアにhref属性をセットする
textarea.value = href;
// テキストエリアを画面外に配置する
textarea.style.position = "absolute";
textarea.style.left = "-9999px";
// テキストエリアをbody要素に追加する
document.body.appendChild(textarea);
// テキストエリアの内容を選択する
textarea.select();
// コピー実行
document.execCommand("copy");
// テキストエリアを削除する
document.body.removeChild(textarea);
// コピーしたことをユーザーに知らせる
alert("コピーしました: " + href);
}
});
</script>
</head>
<body>
<h1>リンクコピーサンプル</h1>
<p>以下のリンクをクリックしてみてください。</p>
<ul>
<li><a id="copy1" href="https://www.bing.com/">Bing</a></li>
<li><a id="copy2" href="https://www.google.com/">Google</a></li>
<li><a id="copy3" href="https://www.yahoo.com/">Yahoo</a></li>
<li><a id="no-copy" href="https://www.amazon.com/">Amazon</a></li>
</ul>
</body>
</html>