【HTML/Javascript】クリップボードにコピーするコードサンプル

PC/プログラム/ゲーム/ネット系レポ TOPはこちら

ホームページで「クリップボード」にコピーをするコード

クリップボードに文字列をコピーする方法について、いくつかご紹介します。

１．現在のURLをクリップボードにコピーする１

リンクを押すと、現在のURLをクリップボードにコピーします。

<a href="javascript:navigator.clipboard.writeText(window.location.href);">クリップボードにコピー</a>

クリップボードにコピー 　

同じですがURLの場合、エンコードした場合

<a href="javascript:navigator.clipboard.writeText(encodeURI(window.location.href));">クリップボードにコピー</a>

クリップボードにコピー

２．現在のURLをクリップボードにコピーする２

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をコピーすることができます。

以上です。