Eine JavaScript-Funktion zum Kopieren von Text in die Zwischenablage mit Unterstützung für moderne und ältere Browser.
2. Wie funktioniert die `copy`-Funktion?
3. Welche Browser unterstützen diese Funktion?
4. Beispiel für die Verwendung!
5. Was passiert, wenn die Berechtigung zum Schreiben in die Zwischenablage nicht erteilt wird?
6. Was passiert, wenn der Browser keine der Kopiermethoden unterstützt?
7. Quellcode der `copy`-Funktion:
1.) Was macht die copy-Funktion?
Die copy-Funktion ermöglicht das Kopieren von Text in die Zwischenablage des Benutzers. Sie verwendet die moderne Clipboard API, wenn verfügbar, und fällt auf ältere Methoden zurück, wenn notwendig.
2.) Wie funktioniert die copy-Funktion?
Die Funktion nimmt einen Text als Eingabe und gibt ein Promise zurück, das entweder aufgelöst wird, wenn der Text erfolgreich kopiert wurde, oder abgelehnt wird, wenn ein Fehler auftritt.
1. Clipboard API verwenden:
- Wenn die Clipboard API verfügbar ist, erstellt die Funktion einen Blob und einen ClipboardItem mit dem Text.
- Sie überprüft die Berechtigung zum Schreiben in die Zwischenablage.
- Wenn die Berechtigung erteilt oder ein Prompt angezeigt wird, wird der Text in die Zwischenablage geschrieben.
- Wenn keine Berechtigung erteilt wird, wird ein Fehler zurückgegeben.
2. Fallback-Methode:
- Wenn die Clipboard API nicht verfügbar ist, überprüft die Funktion, ob document.queryCommandSupported("copy") unterstützt wird.
- Ein unsichtbares Textarea-Element wird erstellt und mit dem Text befüllt.
- Das Textarea-Element wird fokussiert und der Text ausgewählt.
- Der Befehl document.execCommand("copy") wird ausgeführt, um den Text zu kopieren.
- Das Textarea-Element wird anschließend aus dem DOM entfernt.
- Bei einem Fehler wird dieser zurückgegeben.
3.) Welche Browser unterstützen diese Funktion?
- Moderne Browser unterstützen die Clipboard API (navigator.clipboard).
- Ältere Browser, die document.execCommand("copy") unterstützen, können die Fallback-Methode verwenden.
- Browser, die weder die Clipboard API noch document.execCommand("copy") unterstützen, können diese Funktion nicht verwenden.
4.) Beispiel für die Verwendung!
copy("Dies ist ein Beispieltext").then(() => { console.log("Text wurde erfolgreich kopiert!"); }).catch((error) => { console.error("Fehler beim Kopieren des Textes: ", error); });
5.) Was passiert, wenn die Berechtigung zum Schreiben in die Zwischenablage nicht erteilt wird?
Wenn die Berechtigung nicht erteilt wird, gibt die Funktion einen Fehler mit der Meldung "Permission not granted!" zurück.
6.) Was passiert, wenn der Browser keine der Kopiermethoden unterstützt?
Die Funktion gibt einen Fehler mit der Meldung "None of copying methods are supported by this browser!" zurück.
7.) Quellcode der copy-Funktion:
function copy(text) { return new Promise((resolve, reject) => { if (typeof navigator !== "undefined" && typeof navigator.clipboard !== "undefined" && navigator.permissions !== "undefined") { const type = "text/plain"; const blob = new Blob([text], { type }); const data = [new ClipboardItem({ [type]: blob })]; navigator.permissions.query({ name: "clipboard-write" }).then((permission) => { if (permission.state === "granted" || permission.state === "prompt") { navigator.clipboard.write(data).then(resolve).catch(reject); } else { reject(new Error("Permission not granted!")); } }).catch(reject); } else if (document.queryCommandSupported && document.queryCommandSupported("copy")) { var textarea = document.createElement("textarea"); textarea.textContent = text; Object.assign(textarea.style, { position: "fixed", background: "transparent" }); document.body.appendChild(textarea); textarea.focus(); textarea.select(); try { document.execCommand("copy"); resolve(); } catch (e) { reject(e); } finally { document.body.removeChild(textarea); } } else { reject(new Error("None of copying methods are supported by this browser!")); } }); }