[js]「URLをコピー」を作る

シェアボタンと一緒に最近よく見かけるアレ。

どういうものか

SNSのシェアボタン群はよく見かける。だけどそれを使うよりもURLコピペしたほうが楽じゃんみたいなのがある。だからかはしらないけど、「URLをコピー」のボタンをよく見る。実際、あると便利。

逆に当初からある、「メールで送る」は必要に駆られたことが一切ない。使ってる人いるんだろうか。

作る

<div class="url">
    <input type="text" value="【URL】" readonly>
    <span id="share_urlCopy"></span>
    <span class="copied">copied this url!</span>
</div>

URLを表示する枠、コピーするボタン、コピーしたよって表示するやつの3つ。それぞれにjsでギミックを付与する。

$(function(){
    //inputクリックしたら全選択
    $('.url input').focus(function(){$(this).select();});
    //クリップボードにコピー
    $('#share_urlCopy').on('click',function(){
        $('.url input').select();
        document.execCommand("Copy");
        $('.url .copied').fadeOut(function(){$('.url .copied').fadeIn()});
    })
})

jQueryライブラリは別で読ませといてください。

コピーに関しては意外とアナログな組み方になる。
直接クリップボードにはぶち込めないらしく、一旦選択動作をかませる必要がある。ということでinputを活用するんだけど、どうせ設置するなら表示させて、ボタン押さなくても直接コピーできるようにで最初に全選択を仕込んである。

コピーしたタイミングでなにもないとちゃんとコピーできたか怪しいんで、alertもしくはhtml上でコピー済みが分かる仕組みを付けると親切。alertは閉じるのがめんどくさいから今回はHTMLで表示するギミックをつけた。cssでdisplay:none;をやっておけばOK。コピー後もう一度コピーしたら点滅するようにしてあるんで、使い勝手は悪くないと思う。

装飾についてはそれぞれのアレってことで割愛。
ちょっとだけ言うと、URLがinputをぶち抜いたら末尾が「…」になるようにしておくのがいいです。

input{
    text-overflow: ellipsis;
}

以上。