読者です 読者をやめる 読者になる 読者になる

みかづきブログ その3

3ヶ月つづけてみました。

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

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 でご確認ください。