CSS, HTML und Javascript mit {stil}

Javascript onselect • Beim Markieren eines Texts

Das select-Event löst nicht aus, wenn eine Option in einem select-Element gewählt wurde, sondern beim Markieren von Text

Javascript onselect ruft einen Event Handler auf, wenn der Benutzer einen Text in einem Eingabefeld eines Formulars markiert.

select • Javascript-Ereignis für INPUT und TEXTAREA

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.

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.

var in1 = document.getElementById ('in1');
var t1 = document.getElementById ('t1');
in1.onselect =
t1.onselect = function(evt) {

   var 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);
      }
   }
};

Selected: Copy to Clipboard

Das war einst die Hauptaufgabe für select-Events: den markierten Text in das Clipboard – den Zwischenspeicher – zu kopieren. Die modernen Browser spielen da allerdings nicht mehr mit, sie lesen den Inhalt eines input- oder textarea-Feldes nicht ohne Weiteres und überschreiben nicht mir nichts dir nichts das Clipboard des Users.

Man stelle sich nur einmal vor, was ein Third-Party-Skript im Browser (z.B. ein AddOn) alles mit dem Inhalt eines Eingabefeldes anstellen könnte: z.B. Passwörter und andere sensible Daten auslesen.

Zwischenzeitlich gab es nur Copy-to-Clipboard-Lösungen auf Flash-Basis. Inzwischen ist es mit document.execCommand() und cut, copy oder paste wieder möglich, den Inhalt eines Eingabefeldes in das Clipboard zu kopieren. Diese Funktionen unterliegen aber Einschränkungen und sind zwischen unterschiedlichen Betriebssystemen und Browsern nicht konsistent (z.B.: IE11 öffnet zunächst ein modales Fenster und fragt, ob der Text tatsächlich kopiert werden darf).


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
onselect Text im Editor markieren, um ihn Fett zu setzen A Visuell Text Absatz u B I ABC 1 2 3 Dateien hinzufügen Ω ? Überschrift Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis pulvinar, arcu quis ullamcorper tincidunt, massa ligula aliquam nisi, non porttitor lorem magna ac diam. Duis viverra risus at enim accumsan ultrices. Phasellus vestibulum consequat felis nec varius. Nulla turpis nulla, efficitur vitae consectetur eu, Fett