ライブラリを使わずJSでコピペをカスタマイズ

ブラウザでコピーとペーストの際にJSで任意のデータをクリップボードに追加したり取得したりした検証のまとめです。
※IEのことは考慮していません。

clipboard API

まだ実験段階の機能なので、対応状況がブラウザによって異なります。
APIを使うには、まずはイベントを起こさないと使えないようです。
ユーザーのアクションがないと使えないという意図がありそうです。

copyイベントハンドラのイベントオブジェクトにclipboardDataが入ってきます。
clipboardDataはDataTransferなので、ここから色々データをとってこれます。

window.addEventListener('copy', function(e) {
  var clipboardData = e.clipboardData; // ←ここにclipboardDataがある
});

Copy

clipboardData.setDataで任意のデータをコピー

setDataメソッドを使えば、文字列などのデータを追加できます。
formatを独自の文字列で定義できるので、後述するclipboardData.itemsでデータを取得するところで独自のtypeから引っ張ってくることもできます。
画像データの追加はできないんですかね。

clipboardData.setData('text/plain', 'コピーする文字列');

document.execCommand('copy')で任意の文字列をコピー

execCommand('copy')で選択している文字列をコピーすることができます。
これを使ってJS側から任意の文字列をコピーさせることもできます。
強制的にコピーイベントを発火させるちょっとハックっぽい使い方です。
なにかしらユーザのアクション(ここではボタンをクリック)のイベントハンドラ内で、処理をする必要があります。
デモ

document.getElementById('btn').onclick = function() {
  var input = document.createElement('input');
  input.setAttribute('id', 'copyinput');
  document.body.appendChild(input);
  input.value = 'コピーする文字列';
  input.select();
  document.execCommand('copy');
  document.body.removeChild(input);
}

Paste

clipboardData.itemsでデータを引っ張ってくる

ペーストイベントオブジェクトのclipboadDataのitemsプロパティにクリップボードのデータが格納されています。
デモ
ちなみにsafariではサポートされていません。

getAsFile

Fileとして取得できます。
画像はこれを使ってBlobオブジェクトがとれます。

if (item.type.indexOf('image') >= 0) {
  var blob = item.getAsFile();
}

getAsString

単純な文字列はこれでとれます。
なぜかこちらは非同期なので、コールバックを引数にわたしてやる必要があります。

if (item.type.indexOf('text') >= 0) {
  item.getAsString(function(str) {
    console.log('text data: ', str);
  });
}

document.execCommand('paste')でデータを引っ張ってこようとしたが

これも試してみたんですが、どうやら使えなくなっているようです。。。