JS,jQueryで現在のURLをクリップボードにコピーするボタンを実装

TIPS 0 Takuya Kobayashi

URLをクリップボードにコピーするボタンをjs/jQueryで実装。
URLのコピーボタンはfacebookやtwitterなどのシェアボタンより汎用性が高い。

JSは以下の通り。

function clipURL() {
$('body').append('<textarea id="currentURL" style="position:fixed;left:-100%;">'+location.href+'</textarea>');
$('#currentURL').select();
document.execCommand('copy');
$('#currentURL').remove();
alert("URLをコピーしました。");
}

処理としては以下のようになる。

  1. 画面外に現在のURLがセットされたtextareaを生成。
  2. それを選択
  3. クリップボードにコピー
  4. textareaを削除
  5. アラートによりメッセージを表示

次のコードでボタンを設置する

<a onclick="clipURL()">URLをコピー</a>

--
以上