JavaScript | テキストのコピーをトリガーにしたイベントを実装する方法

JavaScript,JavaScript イベント

Javascriptでテキストのコピーをトリガーにした時をトリガーにして発火するイベントの実装方法を紹介しています。

テキストのコピーをトリガーにしたイベントの実装サンプル

JavascriptのaddEventListener()を使ったテキストのコピーをトリガーにしたイベントの実装サンプルとサンプルコードになります。

See the Pen JavaScript | CSS animation Start and End event by yochans (@yochans) on CodePen.

HTMLにはコピーイベント用のテキストを<p>タグで設置しています。

また、イベントの発火を確認するための出力用に<p>タグをひとつ設置しています。

<p id="text">Please copy this text.</p>
<p id="output"></p>

対象とするフォームをquerySelector()で変数名「text」として取得しています。

出力用の<p>タグは変数名「output」になります。

コピーが実行された時の発火イベントはaddEventListener()「copy」を指定しています。

この「copy」のトリガー条件は右クリックメニュー(コンテキストメニュー)でのコピー、または「Ctrl + C」などのコピーするショートカットキーにも対応しています。

let text = document.querySelector(`#text`);
let output = document.querySelector(`#output`);

// animation start
text.addEventListener(`copy`, () => {
	output.textContent = 'You copied the text';
});

JavaScript,JavaScript イベント

Posted by Yousuke.U