Javascript select()

select () Methode

select () markiert oder selektiert den Text einer Textarea oder eines Input-Felds. Das sieht fast genauso aus wie die Methode focus(), aber select () wählt den Text »kopierfähig«.

select() zusammen mit document.execCommand('copy') kann den markierten Text dann ins Clipboard, also in die Zwischenablage des Benutzers, kopieren.

let copybutton = document.querySelector("button[data-select]");
copybutton.onclick = function (e) {
   let target = e.target;
   let copytarget = target.dataset.select;
   // Prüfen, ob es ein Element mit der ID copytarget gibt, null sonst
   let inp = (copytarget ? document.getElementById(copytarget) : null);
   if (inp && inp.select) {
      inp.select();
   }
}

Soweit gibt es keinen Unterschied zu focus(). Aber select zusammen mit document.execCommand('copy') legt den markierten Text direkt in die Zwischenablage des Benutzers.

Select(): Copy to Clipboard

Das war einst die Hauptaufgabe für die Methode select: den Text einer Textarea oder Input-Felds 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).


HTML
<div class="msg"></div>
<textarea id="website">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis pulvinar, arcu quis </textarea>
<button data-copy="#website">copy</button>
Script: Inhalt in die Zwischenablage kopieren
let copybutton = document.querySelector("button[data-copy]");
  
copybutton.addEventListener('click', function(e) {
   let target = e.target;
   let copytarget = target.dataset.copy;
   let inp = (copytarget ? document.querySelector(copytarget) : null);
   if (inp && inp.select) {
      inp.select();
      try {
         document.execCommand('copy');
         inp.blur();
      }
      catch (err) {
         document.querySelector(".msg").innerHTML = "Kopieren mit Ctrl/Cmd + C";
      }
   }
});

Wenn alle klappt, entzieht inp.blur() dem Feld wieder den Fokus.

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