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';
});