「クリップボードにコピー」ボタンをjsで実装してみた

ほげほげほげほげほげほげほげほげほげほげほげほげほげほげ もげもげもげもげもげもげもげもげもげもげもげもげもげもげ ふがふがふがふがふがふがふがふがふがふがふがふがふがふが もがもがもがもがもがもがもがもがもがもがもがもがもがもが ふげふげふげふげふげふげふげふげふげふげふげふげふげふげ

• クリップボードにコピー

<textarea id="hoge">ほげほげほげほげほげほげほげほげほげほげほげほげほげほげ
もげもげもげもげもげもげもげもげもげもげもげもげもげもげ
ふがふがふがふがふがふがふがふがふがふがふがふがふがふが
もがもがもがもがもがもがもがもがもがもがもがもがもがもが
ふげふげふげふげふげふげふげふげふげふげふげふげふげふげ</textarea>

function execCopy(string){
    var temp = document.createElement('textarea');
    temp.value = string;
    temp.selectionStart = 0;
    temp.selectionEnd = temp.value.length;
    var s = temp.style;
    s.position = 'fixed';
    s.left = '-100%';
    document.body.appendChild(temp);
    temp.focus();
    var result = document.execCommand('copy');
    temp.blur();
    document.body.removeChild(temp);
    return result;
}
    
$('#hoge_btn').click(function(){
    if(execCopy($('#hoge').text())){
        alert('コピーできました');
    }
    else {
        alert('このブラウザでは対応していません');
    }
    return false;
});

デモの解説記事に戻る