JavaScript

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

More than 1 year has passed since last update.


概要

2017/12/09時点

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


加筆

2017/12/12時点

1. copy時のe.clipboardData.setDatatext/plaintextに修正。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でいける!