Aktuelle URL in die Zwischenablage kopieren

Ich bin mir nicht sicher, warum mir das heute so schwer gefallen ist, aber aus irgendeinem Grund bekomme ich es anscheinend nicht hin, die aktuelle URL in die Zwischenablage zu kopieren. Insgesamt suche ich nach einer Möglichkeit, dies zu tun ohne müssen einige versteckte Textelemente erstellen.

Das versuche ich bisher:

var shareBtn = document.querySelector(".share-button");

shareBtn.addEventListener('click', function(event) {
  var cpLink = window.location.href;
  cpLink.select();

  try {
    var successful = document.execCommand('copy');
    var msg = successful ? 'successful' : 'unsuccessful';
    console.log('Copy command was ' + msg);
  } catch (err) {
    console.log('Oops, unable to copy');
  }
  event.preventDefault;
});

Wenn ich versuche, es mit dem zu tun .select() Ich bekomme diesen Fehler:
t.select is not a function
Daher bin ich mir nicht 100% sicher, wie ich das am besten angehen soll. Auch hier ohne Verwendung von jQuery (oder einer anderen JS-Bibliothek) und ohne Verwendung eines versteckten Textfelds.

Sie können ein temporäres DOM-Element erstellen, das die URL enthält

Leider gibt es keine Standard-API für Zwischenablageoperationen, also bleibt uns die hackige Art, HTML zu verwenden input Element, das unseren Bedürfnissen entspricht. Die Idee ist, eine Eingabe zu erstellen, ihren Wert auf die URL des aktuellen Dokuments zu setzen, ihren Inhalt auszuwählen und auszuführen copy.

Wir räumen dann das Durcheinander auf, anstatt Eingaben auf versteckt zu setzen und das DOM zu verschmutzen.

var dummy = document.createElement('input'),
    text = window.location.href;

document.body.appendChild(dummy);
dummy.value = text;
dummy.select();
document.execCommand('copy');
document.body.removeChild(dummy);

2021-Update: Sie können die Zwischenablage-API so:

navigator.clipboard.writeText(window.location.href);

Die Antwort von ppajer ist in der Tat alles, was benötigt wird, wenn der Browser das Kopieren übernimmt, ohne dass eine benutzerdefinierte Behandlung von Ereignissen in der Zwischenablage erforderlich ist.

Aber wenn Sie oder eine Bibliothek sich in das Kopierereignis einklinken (z. window.addEventListener('copy', ...) und dann, wenn dieser Handler auf using angewiesen ist window.getSelection()dann ein 19 jähriger Das Firefox-Problem wird Sie beißen. Wie sagt MDN:

Das ist aktuell erwähnenswert getSelection() funktioniert nicht mit dem Inhalt von <textarea> und <input> Elemente in Firefox, Edge (Legacy) und Internet Explorer.

Damit, getSelection() gibt danach ein Nicht-Null-Ergebnis zurück HTMLInputElement#select, jedoch ohne den tatsächlich ausgewählten Inhalt bereitzustellen. Leicht zu beheben, indem ein Nicht-Eingabeelement verwendet wird, um die URL vorübergehend zu speichern:

function copyUrl() {
  if (!window.getSelection) {
    alert('Please copy the URL from the location bar.');
    return;
  }
  const dummy = document.createElement('p');
  dummy.textContent = window.location.href;
  document.body.appendChild(dummy);

  const range = document.createRange();
  range.setStartBefore(dummy);
  range.setEndAfter(dummy);

  const selection = window.getSelection();
  // First clear, in case the user already selected some other text
  selection.removeAllRanges();
  selection.addRange(range);

  document.execCommand('copy');
  document.body.removeChild(dummy);
}

(Das Obige funktioniert auch, wenn kein benutzerdefinierter Handler in das Kopierereignis einklinkt.)

window.navigator.clipboard.writeText(textToCopy);