スキルアップを始める

【JavaScript】テキストをクリップボードにコピーする方法 (Text Copy)

JavaScript(ジャバスクリプト)
メルマガ購読できます

簡単1ステップ!届いたメールの「フォローを確認」クリックでメルマガ登録!一緒にスキルアップを目指しましょう!

JavaScriptで画像をクリップボードにコピーする方法について解説します。実際にサンプルコードを用いながら学びましょう。

JavaScriptでテキストをクリップボードにコピーする

JavaScriptでテキストをクリップボードにコピーするコードです。文字をクリックすると、リンクがシステムのクリップボードにコピーされます。

<div onclick="setDataUrl()" id="target-link">サンプルテキスト</div>

<script>
function setDataUrl(){ 
const link = location.href;
navigator.clipboard.writeText(link);
alert("リンクをコピーしました");
}
</script>

alertは無くても良いですが、分かりやすくするために追加しています。

location.href

location.hrefは、現在のページのURLを含む文字列を返すJavaScriptのプロパティです。このプロパティを使用することで、現在のページのURLを取得することができます。

navigator.clipboard.writeText()は、ブラウザのAPIの1つであり、指定したテキストをクリップボードにコピーするために使用されます。このメソッドを呼び出すには、以下のようにします。

navigator.clipboard.writeText('コピーするテキスト');

document.execCommand(‘copy’)が非推奨になっているため、代わりの方法として、上記のAPIが登場しているようです。

クリップボードとのやりとり - Mozilla | MDN
拡張機能でクリップボードを扱うのは、Web API の document.execCommand メソッド(非推奨)から navigator.clipboard メソッドに移行しています。

まとめ

ただし、このメソッドは比較的新しいAPIであるため、すべてのブラウザでサポートされているわけではありません。サポートされているブラウザについては、MDN Web Docsなどのリソースを確認してください。

Kindle Unlimited 会員は無料で購読できます
購読はこちら
Kindle Unlimited 会員は無料で購読できます
購読はこちら