Aktuelle URL in die Zwischenablage kopieren

Lesezeit: 4 Minuten

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.

  • Da es sich nicht um ein Element handelt, können Sie keinen Text auswählen

    – escarello

    2. April 2018 um 20:55 Uhr

  • Sie können es nicht wirklich ohne ein Dummy-Element tun, das die unterstützt select() Methode was für mich erstaunlich ist in einem Jahr, in dem Browser ihre eigenen Zahlungsintegrations-APIs haben, aber etwas so Grundlegendes wie eine Zwischenablage-API fehlt.

    – ppajer

    2. April 2018 um 21:01 Uhr

  • Was wäre also der beste Weg, um die aktuelle URL dann zu holen und in die Zwischenablage zu bekommen?

    – ultraloveninja

    2. April 2018 um 21:07 Uhr

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

  • Ahhh, erwischt. Es ist irgendwie albern, dass die einzige Möglichkeit darin besteht, ein leeres Objekt zu erstellen und es dann zu entfernen. Aber wenn das der einzige Weg ist…so sei es.

    – ultraloveninja

    2. April 2018 um 21:21 Uhr

  • Ja, es ist ein Schmerz. Ich habe mich in der Selection API umgesehen, um vielleicht einen Weg zu finden, das Ganze ohne die Eingabe zu simulieren, aber bisher kein Glück.

    – ppajer

    2. April 2018 um 21:24 Uhr

  • Wow, also kannst du nur die verwenden execComand NUR bei Texteingaben? Beeindruckend.

    – Kyle Calica-St

    19. Januar 2019 um 19:44 Uhr

  • Ich möchte nur erwähnen, dass dieser Ansatz zumindest mit Chrome nicht funktioniert (oder zumindest in meinem Fall, wo ich Modal verwende). Als Problemumgehung ist es möglich, ein ausgeblendetes Feld vorab zu erstellen, dann wieder sichtbar zu machen + Wert zu ändern + zu kopieren + auszublenden: Details -> stackoverflow.com/a/57192718/4992248

    – TitanFighter

    14. Oktober 2019 um 14:49 Uhr


  • Dies sollte die akzeptierte Antwort sein … es kann ein Hack sein, aber es funktioniert einwandfrei

    – Diego Dorado

    26. März 2020 um 15:26 Uhr

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

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

  • Funktioniert nicht unter IOS

    – Lafi

    29. Dezember 2021 um 18:04 Uhr

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

994100cookie-checkAktuelle URL in die Zwischenablage kopieren

This website is using cookies to improve the user-friendliness. You agree by using the website further.

Privacy policy