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

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

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

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

このページの目次

JavaScriptで貼り付けイベントを監視するには
jQueryで貼り付けイベントを監視するには
補足 : コピーイベントなどを感知するには・・
ここまでのまとめ

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

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

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

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

document.addEventListener("paste", function (e) {
  var pasted = undefined;
  if (window.clipboardData && window.clipboardData.getData) { 
    /** IEの場合 */
    pasted = window.clipboardData.getData('Text');
  } else if (e.clipboardData && e.clipboardData.getData) {
    /** それ以外の場合 */
    pasted = e.clipboardData.getData('text/plain');
  }
  console.log(pasted);
});

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

var pasted = undefined;

if (window.clipboardData && window.clipboardData.getData) {

/** IEの場合 */

pasted = window.clipboardData.getData('Text');

} else if (e.clipboardData && e.clipboardData.getData) {

/** それ以外の場合 */

pasted = e.clipboardData.getData('text/plain');

}

console.log(pasted);

});

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

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

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

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

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

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

document.querySelector('textarea').addEventListener("paste", function (e) {
  var pasted = undefined;
  if (window.clipboardData && window.clipboardData.getData) {
    /** IEの場合 */
    pasted = window.clipboardData.getData('Text');
  } else if (e.clipboardData && e.clipboardData.getData) {
    /** それ以外の場合 */
    pasted = e.clipboardData.getData('text/plain');
  }
  console.log(pasted);
});

document.querySelector('textarea').addEventListener("paste", function (e) {

var pasted = undefined;

if (window.clipboardData && window.clipboardData.getData) {

/** IEの場合 */

pasted = window.clipboardData.getData('Text');

} else if (e.clipboardData && e.clipboardData.getData) {

/** それ以外の場合 */

pasted = e.clipboardData.getData('text/plain');

}

console.log(pasted);

});

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

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

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

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

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

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

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

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

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

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

$(document).bind('paste', function(e){
  var pasted = undefined;
  if (window.clipboardData && window.clipboardData.getData) {
    /** IEの場合 */
    pasted = window.clipboardData.getData('Text');
  } else if (e.originalEvent.clipboardData && e.originalEvent.clipboardData.getData) {
    /** それ以外の場合 */
    pasted = e.originalEvent.clipboardData.getData('text/plain');
  }
  console.log(pasted);
});