[JavaScript]クリップボードを使ったコピーとペースト

Ctrl+CやCtrl+V以外(ボタンのクリックなど)でテキストのコピー&ペーストを実装したい場合、いくつか方法がありますが、ブラウザによって違いがあったりしてややこしいのでまとめました。

コピー

文字を選択させる方法

1. テキストエリアの文字を選択
2. Ctrl+Cを押す

という流れをJavaScriptで行う方法でクリップボードに書き込むには以下のようにします。
これなら、ブラウザ問わずできるはずです。

var textarea = document.getElementsByTagName("textarea")[0];
// 文字をすべて選択
textarea.select();
// コピー
document.execCommand("copy");

ClipboardEvent.clipboardDataを使う方法

ClipboardEvent.clipboardDataを使えば、コピーのイベントが発生したタイミングで、任意の文字を書き込むことができます。
ただし、IEには使えません。IEなど知らぬという声が聞こえますが。

var str = "コピーする文字";

var listener = function(e){
    
    e.clipboardData.setData("text/plain" , str);    
    // 本来のイベントをキャンセル
    e.preventDefault();
    // 終わったら一応削除
    document.removeEventListener("copy", listener);
}

// コピーのイベントが発生したときに、クリップボードに書き込むようにしておく
document.addEventListener("copy" , listener);

// コピー
document.execCommand("copy");

window.clipboardDataを使う方法(IEのみ)

IEでは、window.clipboardDataを使う方法があります。

if(window.clipboardData){
    window.clipboardData.setData("Text" , str);
}

Async Clipboard APIを使う方法

一部のブラウザでは、Async Clipboard APIを使って書き込みができます。(ブラウザ対応状況)

if(navigator.clipboard){
    navigator.clipboard.writeText(str);
}

ペースト

コピーはなんとかいけましたが、ペーストの方はすべてのブラウザに対応するのが現状難しそうです。

execCommand("paste")を使う方法

execCommand("paste")は、セキュリティの問題からか効かないブラウザが多いです。
使える場合は、

1. テキストエリアにフォーカスを当てる
2. Ctrl+Vを押す

という流れをJavaScriptで行う方法があります。

var pasteArea = document.getElementsByTagName("textarea")[0];
pasteArea.focus();
document.execCommand("paste");

window.clipboardDataを使う方法(IEのみ)

IEでは、window.clipboardDataを使う方法があります。

var text = window.clipboardData.getData("Text");
pasteArea.textContent = text;

Async Clipboard APIを使う方法

Async Clipboard APIに対応しているブラウザでは、以下のようにできます。

if(navigator.clipboard){
    navigator.clipboard.readText()
    .then(function(text){
        pasteArea.textContent = text;
    });
}

Ctrl+Vしたときにテキストを取得する方法

ちなみに、Ctrl+Vするなどしてペーストのイベントが発生した時に、クリップボードのテキストを取得するには以下のような方法があります。ただし、IEでは使えません。

function getClipBoardText(e){
    e.preventDefault();

    var clipboardData = e.clipboardData;

    if(clipboardData != null){
        
        var text = clipboardData.getData("text/plain");
        console.log(text);
    }
}

document.addEventListener("paste" , getClipBoardText);

参考

・クリップボードとのやりとり - Mozilla | MDN
・ClipboardEvent.clipboardData - Web APIs | MDN
・JavaScript からクリップボードを扱える Async Clipboard API がそろそろ見えてきました
・Clipboard API - Web APIs | MDN
・JavaScript まとめ - クリップボード操作