クリップボードに文字列をコピーする方法について、いくつかご紹介します。
リンクを押すと、現在のURLをクリップボードにコピーします。
<a href="javascript:navigator.clipboard.writeText(window.location.href);">クリップボードにコピー</a>
同じですがURLの場合、エンコードした場合
<a href="javascript:navigator.clipboard.writeText(encodeURI(window.location.href));">クリップボードにコピー</a>
Javascriptで記載しています。ポップアップ表示もします
<a href="javascript:copy_now_url_clipboard();">クリップボードにコピー</a>
<script>
function copy_now_url_clipboard()
{ myURL = encodeURI(window.location.href);
navigator.clipboard.writeText(myURL);
alert("コピーしました : " + myURL);
}
</script>
ボタンを使用する場合はこんな感じです。
<input type="button" value="コピーします" onclick="copy_now_url_clipboard();"/>
<script>
function copy_now_url_clipboard()
{ myURL = encodeURI(window.location.href);
navigator.clipboard.writeText(myURL);
alert("コピーしました : " + myURL);
}
</script>
<form><textarea name="AAA" id="AAA">この文字列をコピーします</textarea></form>
<a href="javascript:copy_To_clipboard();">クリップボードにコピー</a>
<script>
function copy_To_clipboard()
{ var copyTarget = document.getElementById("AAA");
navigator.clipboard.writeText(copyTarget.value);
alert("コピーしました : " + copyTarget.value);
}
</script>
文字列を画面上に見せたくない場合は、hiddenで指定することも可能です。
<form>
<input type="hidden" name="BBB" id="BBB" value="この文字列をコピーします" />
</form>
<a href="javascript:copy_To_clipboard();">クリップボードにコピー</a>
<script>
function copy_To_clipboard()
{ var copyTarget = document.getElementById("BBB");
navigator.clipboard.writeText(copyTarget.value);
alert("コピーしました : " + copyTarget.value);
}
</script>
こんな感じで、クリップボードに文字列やURLをコピーすることができます。
以上です。