コピー操作を検出する - JavaScript

JavaScriptでページ内のコントロールやページでのコピーの操作を検出するコードを紹介します。

概要

テキストボックスなどHTMLページのコントロールの要素で、コピーの操作をしたことを検知したい場合があります。
要素のcopyイベントのリスナを設定することでページやコントロールでのコピーの操作をするとイベントが発生する設定にできます。

書式

  (HTML要素).addEventListener('copy', (イベントリスナの関数または無名関数) );

実装例

以下のHTMLファイルを作成します。

CopyEvent.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
  <script type="text/javascript">
    window.onload = Page_Load;

    function Page_Load() {
      var text_box = document.getElementById("textbox1");
      text_box.addEventListener('copy', TextBoxOnCopy);
    }

    function TextBoxOnCopy(event) {
      var elem = document.getElementById("output");
      elem.innerText = "コピーされました。";
    }
  </script>
</head>
<body>
  <h2>テキストボックスのコピーの検出</h2>
  <form action="" name="searchForm">
    <input type="text" id="textbox1" value="ぺんぎんクッキー" />
  </form>
  <hr />
  <div id="output"></div>
</body>
</html>

解説

ページの読み込み時にテキストボックスの要素を取得し、addEventListener()メソッドを呼び出し、copy イベントを設定します。イベント発生時には、TextBoxOnCopy() 関数を呼び出します。

    function Page_Load() {
      var text_box = document.getElementById("textbox1");
      text_box.addEventListener('copy', TextBoxOnCopy);
    }

TextBoxOnCopy関数では、ページ下部の出力エリアの要素オブジェクトを取得し、"コピーされました。"のメッセージを表示します。

    function TextBoxOnCopy(event) {
      var elem = document.getElementById("output");
      elem.innerText = "コピーされました。";
    }

なお、インラインの無名関数を使用し場合は以下のコードになります。

    function Page_Load() {
      var text_box = document.getElementById("textbox1");
      text_box.addEventListener('copy', function (event) {
        var elem = document.getElementById("output");
        elem.innerText = "コピーされました。";
      });
    }