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

JavaScript,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()を取得するという方法も可能です。

これらの場合は、要素に対して指定する事も可能になります。

JavaScript,JavaScript イベント

Posted by Yousuke.U