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

「ページ全体で貼り付け(ペースト)イベントを監視したい」
「テキストエリアに貼り付けされたテキストの内容を知りたい」

そういう場合はクリップボードの監視をすれば貼り付けテキストの取得が可能です。

ここではJavaScript・jQueryそれぞれで貼り付けを検知&取得する方法をまとめました。

JavaScriptで貼り付けイベントを監視するには

初めは純粋なJSで貼り付けイベントを感知する方法について

そのやり方は簡単で 'paste'  というイベントタイプをaddEventListenerメソッドに渡すだけでOKです。

 

例えば次が貼り付けされたテキストを表示する簡単なコード例

貼り付けされたテキストを取得するには

  • IEの場合 ⇒  window.clipboardData.getData  を使用
  • それ以外の場合 ⇒ e.clipboardData.getData  を使用

のようにIEとそれ以外で取得方法が違うことに要注意

あと上コードだと e.clipboardData.getData  の引数には 'text/plain'  を渡してますが、HTML形式(リッチテキスト)で取得するなら 'text/html'  を渡してもOKです。

 

もちろんドキュメント全体でなく、個別要素に対して貼り付けを監視することもできます。

例えば次がテキストエリアに対して貼り付けイベントを監視しているコード例

JavaScriptではquerySelectorメソッドを使うことでセレクタ指定で要素を取得することが可能。上コードだと querySelector('textarea')  でテキストエリア全体に貼り付けイベントを設定してます。

参考記事 : JavaScriptでセレクタを使って要素を取得する方法

まあ個別要素でイベント監視するならjQueryを使った方が楽ですね。jQueryで貼り付けイベントを監視する方法についてはこの次に紹介します。

 

以上がJavaScriptで貼り付けイベントを監視する方法

IEとその他のブラウザでは使用するAPIが違うことに注意です。とはいってもIEにわざわざ対応させる必要があるかは少し疑問ですが・・・

jQueryで貼り付けイベントを監視するには

jQueryを使っている場合でも貼り付けイベントの感知はできます。

そのやり方は先ほど紹介したaddEventListenerメソッドをonメソッドやbindメソッドに書き換えるだけ

たったそれだけですがコードを書くときは少しだけ注意が必要なこともあります。

 

例えば次がjQueryで貼り付けを検知&表示しているコード例

jQuery流の書き方になったことを除けばさっきのコードとほとんど変わらないように見えます。

ですが上コードでハイライトした行(8行目)をよく見てください。 e.clipboardData.getData  だった部分が e.originalEvent.clipboardData.getData  に変更しています。

「突然出てきた originalEvent  って何?」と思う人が多いと思いますが、これはjQueryに本来ないイベントプロパティを取得するためのプロパティのこと。貼り付けイベントはJavaScript固有のイベントなのでこういう処理が必要なわけです。

あとはJavaScritpのコードとほとんど同じなので注意すべきことはありません。

補足 : コピーイベントなどを感知するには・・

JavaScriptでは貼り付けに加えコピーイベントの監視もできます。

そのやり方やコード例は次記事でまとめた通り

貼り付けイベントが 'paste'  だったので、コピーの場合は 'copy'  というイベントタイプを使うだけです。ただしコピーテキストの書き換えのコードを書くときは少し注意が必要ですね。具体的なコード例や注意点については上の記事をご覧ください。

ここまでのまとめ

貼り付けイベントは 'paste'  というイベントタイプを使えばJavaScript・jQueryのどちらを使っていてもほぼ同じ方法で監視できます。

書きやすさの点ではわざわざJavaScript固有の書き方をするメリットはないので、jQueryを使って貼り付けイベントを検知するのが簡単だと思います。

以上貼り付けイベントの監視・貼り付けテキストの取得方法についてでした。

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

コメントを残す

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

CAPTCHA


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