JavaScriptの力をつかってテキストをコピーするボタンをつくる

kimizuka.hatenablog.com

以前は Flashをつかってコピーボタンをつくりました が、今回はJavaScriptの力でコピーボタンをつくります。

JavsScript

document.getElementById("btn").addEventListener("click", function() {
    var address = document.getElementById("address").firstChild;
    var range = document.createRange();
    var selection = window.getSelection();
    
    range.setStart(address, 0);
    range.setEnd(address, address.length);
    
    selection.removeAllRanges();
    selection.addRange(range);
    
    if (document.execCommand("copy")) {
        alert("テキストをコピーしました。");
    } else {
        alert("このブラウザではコピーボタンは利用できないです。")
    }
    
}, false);

HTML

<p id="address">https://kimizuka.fm</p>
<div data-color="black" class="btn" id="btn">
  <div class="hole">
    <div class="inner">COPY</div>
  </div>
</div>

DEMO

※ Google Chrome でご確認ください。