Help us understand the problem. What is going on with this article?

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

More than 1 year has passed since last update.

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 まとめ - クリップボード操作

butakoma
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away