JavaScriptでテキスト選択時に処理を追加するのに便利なselectstartイベントの使い方

テキスト選択時に処理を追加するselectstartイベント

selectstartイベントは、対象のテキストが選択された時に発生します。

イベント

イベント発生タイミング
selectstartテキストが選択された時
テキスト選択時のイベント

サンプルコード

サンプルコードとして、選択した文字列を取得して表示するスクリプトを紹介します。

Output

ページ上のテキストをどこでも良いので選択してください。

Pug
p ページ上のテキストをどこでも良いので選択してください。
	#targetText
JavaScript
const targetText = document.getElementById('targetText');
// 選択開始したときの処理
window.addEventListener('selectstart', () => {
	targetText.textContent = '';
	this.addEventListener(
    'mouseup', () => {
			// 選択されている文字列を取得する※
			const selectionCharacters = this.getSelection().toString();
			if (selectionCharacters.length > 0) {
				targetText.textContent = selectionCharacters;
			}
		});
});
インストラクター
コメント

コメントを残す