Javascript select-Event – Text in Eingabefeld markiert

Text in input- oder textarea markieren

select klingt, als wäre es ein Event für ein select-Element in einem Formular, reagiert aber tatsächlich auf das Markieren eines Textes in einem Eingabefeld (beim Ändern von input, textarea und select feuert ein onchange-Event).

<input type="text">
<input type="search">
<input type="url">
<input type="tel">
<input type="password"> (eingeschränkt)
<textarea>

Hingegen löst das select-Event nicht auf auf <div contenteditable>, nicht auf normalen Text in p- oder span-Elementen, nicht auf Checkboxen, Radio-Buttons und nicht auf button-Elementen.

Das select-Event wird z.B. für Editoren eingesetzt – etwa in den Editoren von Content Management Systemen, wo der Editor erkennen muss, dass ein Text markiert wurde, um über einen Button fett gesetzt zu werden.

Markierten Text erkennen

Wenn der Benutzer Text in einem input- oder textarea-Feld markiert (gleich, ob durch Klicken und Ziehen der Maus oder durch Tastatur-Befehle wie Shift + Rechtspfeil), meldet sich das select-Event.

Ein Event Handler für textarea könnte z.B. einen markierten Text in strong-Tags setzen, um ein Textfeld mit zusätzlichen Funktionen auszustatten.

const formdemo = document.querySelector("#formdemo");
const resp = document.querySelector("#resp");

formdemo.addEventListener("select", (event) => {
	const el = event.target;

	if (el.matches("input.formdemo, textarea.formdemo")) {
		const start = el.selectionStart;
		const end = el.selectionEnd;

		const selectedText =
			start !== end ? el.value.slice(start, end) : "(nichts markiert)";

		resp.textContent = `Markiert in ${el.tagName.toLowerCase()}: "${selectedText}"`;
	}
});

input- und textarea-Felder kapseln ihren Text und der Browser behandelt sie nicht als DOM-Text. Darum haben sie ein eigenes Selection-API.

el.selectionStart
el.selectionEnd
el.value.slice(start, end)

Markierten Text auf einem Touchscreen erkennen

Früher galt – besonders auf iOS: das select-Event feuert unzuverlässig und die Touch-Selektion war nicht standardisiert, selectionchange inkonsistent.

Um ein Selektieren auf dem Touchscreen zu überwachen, wurde ein EventListener für touchstart, touchmove, touchend und selectionchange herangezogen.

Heute reicht element.addEventListener("select", handler)

const touchArea = document.querySelector("#touchArea");
const result = document.querySelector("#result");

function handleTextSelection(event) {
  const el = event.target;

  // Nur relevante Elemente
  if (!(el instanceof HTMLInputElement || el instanceof HTMLTextAreaElement)) {
    return;
  }

  const { selectionStart, selectionEnd, value } = el;

  // Keine echte Markierung
  if (selectionStart === selectionEnd) {
    return;
  }

  const selectedText = value.slice(selectionStart, selectionEnd);

  console.log("Markierter Text:", selectedText);
  result.innerHTML = selectedText;

  return selectedText;
}

touchArea.addEventListener("select", handleTextSelection);

onselect Attribute

target

Objekt zu dem das Ereignis ursprünglich gesendet wurde

eventPhase

Phase, in der das Ereignis bearbeitet wird: AT_TARGET, BUBBLING_PHASE, CAPTURING_PHASE

bubbles

true, wenn das Ereignis nach oben steigen kann

cancelable

Nein

timeStamp

Zeit in Millisekunden, zu der das Ereignis eingetreten ist