Javascript onselect • Markieren von Text

Javascript on select Event: Beim Markieren von Text

Das select-Event feuert, wenn der Benutzer einen Text in einem Eingabefeld eines Formulars markiert.

select • Javascript-Ereignis für INPUT und TEXTAREA

18-12-15 SITEMAP CSS HTML JS Basis JS Web Tutorial SVG

onselect 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).

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.

Das Markieren von Text erkennen
Text im Editor markieren, um ihn Fett zu setzen

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 in1 = document.getElementById ('in1');
const t1 = document.getElementById ('t1');
in1.onselect =
t1.onselect = function(evt) {

   let selectedText = "";

   if (window.getSelection) {		
      if (this.getAttribute("id") === "t1") {
         selectedText = this.value.substring(t1.selectionStart,t1.selectionEnd);
      }
         if (this.getAttribute("id") === "in1") {
            selectedText = this.value.substring(in1.selectionStart,in1.selectionEnd);
      }
   }
};

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