JavaScriptでコピー時に処理を発動させる方法

この記事では、JavaScriptのaddEventListener()を用いて、文字がコピーされた時に処理を発動させる方法について見ていきたいと思います。

addEventListener()とは

addEventListener()は、指定したイベントが発生した時に指定した処理を発動させるメソッドです。

対象.addEventListener(イベントの種類, 処理)

※「対象」は、読み込まれたwebページである「document」やHTML要素などを指定します。
※「処理」は、関数を使って指定します。

対象.addEventListener(“copy”, 処理)

・HTML

<p>範囲を選択してコピーをすることでアラートが表示されます。</p>

・JavaScript

document.addEventListener("copy", () => {
  alert("クリップボードにコピーされました。");
});

この例では、ページに表示された文章の任意の範囲を選択し、コピーをすると「クリップボードにコピーされました。」というアラートが表示されます。

では実際に試して見ましょう。

範囲を選択してコピーをすることでアラートが表示されます。

上に表示されている文章の好きな範囲を選択してコピーをするとアラートが表示されますね。

以上で見てきたように、addEventListener()のイベントに「copy」を指定すると、
選択した範囲をコピーした際に指定した処理を発動させることができます。