【JavaScript】クリップボードにコピー

Tweet

Category JavaScript 2018/04/27

問題

「クリックしたら、クリップボードにコピーする」を作りたいです。

答え

例です。

input要素はわりと簡単。

<input type="text" id="copy-target" value="コピー対象コピー対象コピー対象" readonly>
<input type="button" onclick="clipboard_ni_copy()" value="コピー📎">

<script>
function clipboard_ni_copy() 
{ 
    var copyText = document.querySelector('#copy-target'); 
    copyText.select(); 
    if(document.execCommand('copy')) {
        alert('クリップボードにコピーしました.');
    } else {
        alert('Ctrl+Cを押してください.');
    }
}
</script>

span要素やp要素のテキストをコピーするのも可能。

コピー対象2コピー対象2コピー対象2

<span style="background:#ff6;" id="copy-target2">コピー対象2コピー対象2コピー対象2</span>
<input type="button" onclick="clipboard_ni_copy2()" value="← クリックしたらクリップボードにコピーします">

<script>
function clipboard_ni_copy2() 
{ 
    var copyText = document.querySelector('#copy-target2'); 

    var range = document.createRange();
    range.selectNodeContents(copyText);

    var selection = window.getSelection();
    selection.removeAllRanges();
    selection.addRange(range);

    if(document.execCommand('copy')) {
        alert('クリップボードにコピーしました.');
    } else {
        alert('Ctrl+Cを押してください.');
    }
}
</script>

ポイントは以下の2つ

・選択した要素をコピーする document.execCommand(‘copy’)
・要素に応じて選択方法を変える

メモ

なお、onloadでクリップボードに何かぶち込むといった使い方は、セキュリティ上問題があるためか、させてもらえないようです。

クリップボードに何か入れるには、ユーザーの何らかのアクションが必要なようです。