JavaScriptでクリップボードのコピーを取得・書き換えする方法

ブラウザでコピーされたテキストはJavaScript側で取得することができます。

またある方法を使うことでクリップボードの内容を書き換えることも可能です。

ここではそのやり方やクリップボードの取得・書き換えのコード例についてまとめました。

このページの目次

クリップボードのコピー検知には copy イベントを使う
JS側でコピーテキストの書き換えを行うには
補足 : 貼り付けイベントなどを監視するには・・
ここまでのまとめ

クリップボードのコピー検知には copy イベントを使う

JavaScriptではaddEventListenerメソッドに対して色々なイベントタイプを渡しますよね。

有名なイベントなら 'click' とか 'hover' とか 'mousedown' とか・・・

その中でクリップボードのコピーを検知するには 'copy' というイベントを使います。

例えば純粋なJavaScriptのみでコピーテキストを取得するコードを書くと次の通り

document.addEventListener("copy", function (e) {
  var copied = window.getSelection().toString();
  console.log(copied);
});

document.addEventListener("copy", function (e) {

var copied = window.getSelection().toString();

console.log(copied);

});

document 全体にコピーが起きた時のコールバックを設定し、 window.getSelection() からコピーされたテキストを文字列で表示しているだけ

コピーテキストの取得手順はこれだけなので簡単です。

ただし window.getSelection() は一部ブラウザでは未対応の場合があるので注意。どのブラウザがどのバージョンから対応しているかは次のページで確認をどうぞ

caniuse.com

Can I use... Support tables for HTML5, CSS3, etc

https://caniuse.com/#search=selection

まあ Chrome とか Firefox とかの主要ブラウザはまず対応してるので問題ありません。

あとjQueryを使っている場合でもコピーイベントは検知できます。そのやり方は先ほどのaddEventListener のコードをonメソッドまたは bindメソッドに置き換えるだけです。

例えば次がonメソッドを使って全体のコピーイベントを取得するコード

$(document).bind('copy', function(e){
  var copied = window.getSelection().toString();;
  console.log(copied);
});

$(document).bind('copy', function(e){

var copied = window.getSelection().toString();;

console.log(copied);

});

さっき紹介したコードをそのまんまjQuery風に書き換えるだけで行けます。

コピーテキストを取得するのも window.getSelection() を使えばいいだけ。jQueryを使っている場合は addEventListenrメソッドよりこちらの方を使った方が簡単かも

JS側でコピーテキストの書き換えを行うには

コピーイベントはコピーテキストの取得ができるだけじゃありません。

イベント側でコピーテキストの値を書き換えすることも可能です。

例えば次がコピーテキストの内容をJS側で書き換えているコード例

document.addEventListener('copy', function(e){
  /** 元のコピーテキストを取得 */
  var copied = window.getSelection().toString();
  /** コピーテキストを書き換え */
  e.clipboardData.setData('text/plain', copied.toUpperCase());
  /** 元のイベントが起こるのをキャンセル */
  e.preventDefault();
});

document.addEventListener('copy', function(e){

/** 元のコピーテキストを取得 */

var copied = window.getSelection().toString();

/** コピーテキストを書き換え */

e.clipboardData.setData('text/plain', copied.toUpperCase());

/** 元のイベントが起こるのをキャンセル */

e.preventDefault();

});

重要なのは上コードでハイライトしたようにsetDataメソッドを使って書き換えすること

この行で呼び出しているsetDataメソッドの１つめの引数にデータの型（フォーマット）、２つめの引数には実際のデータを渡して使います。この場合だとデータ型が 'text/plain' なので２つめに渡した値は純粋なテキストとしてクリップボードにコピーされるわけです。

ちなみにHTML形式でコピーさせたいなら１つめの引数に 'text/html' を渡してもOK

あとこのコードでは e.preventDefault(); で元のイベントをキャンセルしてることも重要ですね。こうしないとコピーテキストの書き換えが反映されなくなるので注意です。

以上が純粋なJavaScriptでコピーテキストを書き換える方法

単純に書き換えるのではダメで　setDataメソッドでコピーテキスト書き換え　⇒　元のコピーイベントをキャンセル　という処理が必要なのは忘れないようにしましょう。

もちろんこれを同じことはjQueryを使ってもできます。ただしjQueryでやる場合は１つだけ注意点というかコードの書き方に注意が必要です。

例えば次がjQueryでコピーテキストの書き換えを行っているコード

$(document).bind('copy', function(e){
  var copied = window.getSelection().toString();
  e.originalEvent.clipboardData.setData('text/plain', copied.toUpperCase());
  e.preventDefault();
});

$(document).bind('copy', function(e){

var copied = window.getSelection().toString();

e.originalEvent.clipboardData.setData('text/plain', copied.toUpperCase());

e.preventDefault();

});

単純にさっきのコードをbindメソッドで書き換えただけに見えますが、１つ違うところがあります。

それが上コードでハイライトしたsetDataメソッドの部分。よくみると e.clipboard.setData ではなく、 e.originalEvent.clipboard.setData となっています。

突然出てきた originalEvent ですが、これはjQuery側で取得できないイベントプロパティを取得するためのプロパティのこと。 clipboardData はJavaScript側のイベントプロパティでないのでこういう呼び出し方が必要という訳です。

このことに注意すれば先ほどのコードとほぼ同じなので他の注意点はありません。

補足 : 貼り付けイベントなどを監視するには・・

コピーイベントに加え、貼り付けイベントも監視可能です。

その詳しいやり方やコード例なんかは次でまとめた通り

PisukeCode - Web開発まとめ

JavaScript・jQueryでクリップボードの貼り付けを検知する方法

https://pisuke-code.com/javascript-clipboard-paste-event

「ページ全体で貼り付け（ペースト）イベントを監視したい」「テキストエリアに貼り付けされたテキストの内容を知りたい」そういう場合はクリップボードの監視をすれば貼り付けテキストの取得が可能です。ここではJavaScript・jQueryそれぞれで貼り付けを検知＆取得する方法をまとめました。JavaScriptで貼り付けイベントを監視するには初めは純粋なJSで貼り付けイベントを感知する方法についてそのやり方は簡単で'paste' というイベントタイプをaddEventListenerメソッドに渡すだけでOKです。例えば次が貼り付けされ...

ちなみに貼り付けの場合は貼り付けられる前のテキストは変更できません。このイベントは貼り付け後のテキストを取得するためのものです。

ここまでのまとめ

コピーイベントでのコピーテキストの取得・書き換えについて簡単にまとめると次の通り

コピーテキストの取得
コールバック内で window.getSelection().toString() を呼び出せばOK。実際に今コピーされたテキストが取得できる
コピーテキストの書き換え
コールバック内で e.clipboardData.setData でコピーテキストの変更可能。ただし元のイベントをキャンセルするため e.preventDefault(); の呼び出しも忘れずに