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

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

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

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

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

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

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

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

 

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

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

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

 

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

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

 

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

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

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

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

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

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

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

 

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

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

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

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

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

 

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

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

 

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

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

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

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

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

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

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

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

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

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

ここまでのまとめ

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

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

以上JavaScriptでのコピーテキストの取得や書き換え手順についてまとめました。

Commentsこの記事についたコメント

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA


このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください