ウェブブラウザでのコピー&ペーストを実装する

概要

2017/12/09時点
ブラウザで対象の文字列のコピー&ペーストを行う時があったので、そのときの実装のメモ。

加筆

2017/12/12時点
1. copy時のe.clipboardData.setDataにtext/plainをtextに修正。textにするとosのクリップボードに貼り付けられた。
2. windows環境ではclipboard.jsのcopyによりclipboardEventが2回呼ばれてしまっていた

環境

	バージョン
macOS	10.12.6
safari	11.0.1 (12604.3.5.1.1)
chrome	62.0.3202.94

利用するもの

ClipBoardEventのcopyとpaste。他にcutもあるよ。

コード

// ctrl+vなどで動く
window.addEventListener('paste', e => {
  const clipboardData = e.clipboardData;
  if (!clipboardData) {
    alert('this browser does not work ClipboardData'); // ここはtext/plainでも上手く行ったのだがなぜ？
    return;
  }
  var clipboardText = clipboardData.getData('text');
  console.log(clipboardText);
});
// ctrl+cなどで動く
window.addEventListener('copy', e => {
  const clipboardData = e.clipboardData;
  if (!clipboardData) {
    alert('this browser does not work ClipboardData');
    return;
  }
  clipboardData.setData('text', 'コピーしたい文字列'); // textだとosに貼り付けられる
});

困った点

1. 他のサイトではclipboardDataにitemsというプロパティがあり、そこのgetAsStringからデータを読み取るようなコードもあった。
   しかし、itemsについて、chromeでは利用できたが、safariからは読み取れなかった。そのためgetDataを使うようにした。

2. e.clipboardData.setData('text/plain', 'コピーしたい文字列');
   この部分はブラウザ内で利用できるclipboardにはコピーができるのだが、実際のOSのClipBoardにはコピーがされなかった。（説明が難しい）
   そのため、追加でコピー時にclipboard.jsを利用した。

textでいける！