JavaScript | テキストの選択をトリガーにしたイベントを実装する方法
Javascriptでテキストの選択をトリガーにした時に発火するイベントの実装方法を紹介しています。
テキストの選択をトリガーにしたイベントの実装サンプル
JavascriptのaddEventListener()を使ったテキストの選択をトリガーにしたイベントの実装サンプルとサンプルコードになります。
See the Pen JavaScript | Events triggered by copying text by yochans (@yochans) on CodePen.
HTMLにはテスト用のテキストを<p>タグで設置。
また、イベントの発火を確認するための出力用に<p>タグをひとつ設置しています。
<p>Please select this text.</p>
<p id="output"></p>出力用の<p>タグは変数「output」になります。
テキスト選択時の発火イベントはaddEventListener()で「selectionchange」を指定しています。
出力ログには選択テキストが格納されているwindow.getSelection().toString()を取得して描画するようにしています。
let output = document.querySelector(`#output`);
document.addEventListener(`selectionchange`, () => {
output.textContent = window.getSelection().toString();
});関数を定義する場合は以下のようになります。
let output = document.querySelector(`#output`);
let selection_change_function = () => {
output.textContent = window.getSelection().toString();
};
document.addEventListener(`selectionchange`, selection_change_function, false);上記サンプルでは「selectionchange」を指定しています。
正確には選択テキストの変更時となる為、一文字毎に呼び出されます。
選択開始をトリガーにする場合は「selectstart」を指定する事が可能です。
また、選択終了時をトリガーにする場合は「keyup」を指定してwindow.getSelection().toString()を取得するという方法も可能です。
これらの場合は、要素に対して指定する事も可能になります。