Meta tags:
description= Die moderne asynchrone JavaScript Clipboard API — Text mit navigator.clipboard lesen und kopieren, Rich-Data mit ClipboardItem verwalten und…;
Headings (most frequently used words):
text, zwischenablage, der, javascript, clipboard, api, in, die, schreiben, aus, lesen, anforderungen, und, häufige, fallstricke, rich, daten, mit, clipboarditem, kopieren, legacy, fallback, praxisanwendungen, testen, sie, ihr, wissen,
Text of the page (most frequently used words):
und (67), die (47), #clipboard (41), api (35), sie (27), der (27), text (25), das (21), kopieren (20), ist (20), zwischenablage (19), navigator (19), dom (19), mit (17), ein (17), document (16), lernen (15), javascript (15), oder (13), const (13), await (12), clipboarditem (11), copy (11), den (11), einem (11), methoden (11), async (11), html (10), catch (10), browser (10), promise (10), blob (10), aus (9), lesen (9), benutzer (9), try (9), von (9), wenn (9), web (8), nicht (8), wird (8), button (8), für (7), daten (7), write (7), einen (7), function (7), textarea (7), read (7), w3docs (6), code (6), tools (6), rich (6), methode (6), events (6), als (6), eine (6), hat (6), output (6), url (6), console (6), err (6), string (6), schreiben (5), verwenden (5), funktioniert (5), zurück (5), data (5), type (5), item (5), error (5), fetch (5), seite (5), status (5), formatter (5), color (5), alle (4), über (4), json (4), generator (4), css (4), prüfen (4), kann (4), execcommand (4), nur (4), welche (4), sind (4), können (4), abgelehnt (4), werden (4), zum (4), writetext (4), gibt (4), auch (4), kopiert (4), auf (4), element (4), image (4), typ (4), failed (4), readtext (4), script (4), textcontent (4), getelementbyid (4), shadow (4), einführung (4), encoder (3), editor (3), quizze (3), übungen (3), php (3), ihr (3), fallback (3), this (3), page (3), formulare (3), cut (3), paste (3), moderne (3), objekten (3), wie (3), sicheren (3), kontext (3), übung (3), ohne (3), aufrufe (3), beispiel (3), dokument (3), sollte (3), jeder (3), aufruf (3), block (3), schreibt (3), aber (3), asynchrone (3), sodass (3), muster (3), mime (3), typen (3), einer (3), array (3), mehrere (3), new (3), während (3), dem (3), promises (3), ereignisse (3), flag (3), objekte (3), event (3), and (3), eigenschaften (3), funktionen (3), objekt (3), operatoren (3), italiano (2), português (2), español (2), français (2), русский (2), deutsch (2), english (2), beautifier (2), diff (2), password (2), python (2), java (2), git (2), bücher (2), snippets (2), testen (2), wissen (2), praxisanwendungen (2), legacy (2), anforderungen (2), häufige (2), fallstricke (2), ereignis (2), submit (2), change (2), input (2), was (2), erlaubnis (2), bitten (2), ansatz (2), textdaten (2), bilder (2), https (2), localhost (2), aussagen (2), korrekt (2), berechtigungen (2), unterstützten (2), warum (2), eingeschlossen (2), window (2), set (2), copytext (2), immer (2), geben (2), zeigen (2), barrierefreiheit (2), hinweis (2), passwort (2), schlüssel (2), schaltflächen (2), damit (2), viele (2), copytextfallback (2), body (2), diese (2), bild (2), nach (2), png (2), log (2), types (2), for (2), items (2), aufgelöst (2), konstruktor (2), auswählen (2), copied (2), response (2), fall (2), fehler (2), not (2), beachten (2), außerdem (2), dass (2), fokussiert (2), settimeout (2), beim (2), laden (2), durch (2), berechtigung (2), sollten (2), benutzerinteraktion (2), inhalt (2), private (2), click (2), addeventlistener (2), pastebtn (2), schreibvorgang (2), sich (2), erfolgreich (2), war (2), copybtn (2), span (2), workers (2), file (2), suche (2), quantoren (2), anker (2), flags (2), components (2), animationen (2), the (2), microtasks (2), benutzerdefinierte (2), styles (2), klassen (2), arrays (2), generatoren (2), advanced (2), fehlerbehandlung (2), chaining (2), erweitern (2), handling (2), class (2), prototypes (2), interaktive (2), elemente (2), property (2), object (2), arrow (2), syntax (2), variablen (2), functions (2), objects (2), hash (2), 2026, rechte, vorbehalten, entwickler, gemacht, sprache, datenschutzrichtlinie, kontakt, uns, unternehmen, probier, üben, kostenlose, tutorials, beispiele, seit, 2014, next, previous, yes, helpful, stärker, eingeschränkt, empfohlene, erforderlich, asynchron, machen, automatisch, geleert, bei, verweigerten, fokussierten, sichtbares, feedback, schaltfläche, still, lässt, unklaren, ändern, beschriftung, kurzen, toast, aktualisieren, benachbartes, statuselement, gewinn, bildschirmleser, keinen, vom, selbst, erhalten, tipp, formatierten, zitat, generiertem, legen, chats, mails, einzufügen, link, teilen, dokumentationsseiten, leser, ausschnitt, manuelle, auswahl, übernehmen, ermöglicht, kleine, wertvolle, interaktionen, täglich, sehen, else, moderner, bevorzugen, zurückfallen, fehlt, removechild, deprecated, select, appendchild, value, createelement, vor, asynchronen, bedeutete, auszuwählen, aufzurufen, inzwischen, älteren, browsern, noch, ausschließlich, nützlich, typische, wählte, verstecktes, führte, dann, befehl, veraltet, unterstützung, eingeschränkter, weniger, einheitlich, textmethoden, variieren, insbesondere, zuverlässigsten, feature, verfügbarkeit, greifen, verfügbar, found, gettype, readclipboarditems, analog, inspizieren, hier, wert, diesen, einzelnes, repräsentationen, enthalten, sowohl, zielanwendung, beste, plain, copyimage, folgende, lädt, verpackt, resultierenden, einfache, formate, gleichzeitig, entgegennimmt, jedes, ordnet, ihren, typischerweise, benötigt, fokus, operationen, beispielsweise, heraus, aufrufen, anderen, tab, gewechselt, ablehnung, focused, erwarten, lesevorgang, erst, möglich, nachdem, ihre, interagiert, bedeutet, entwicklung, einfachen, regel, erfordern, generell, klick, tastendruck, fehlschlagen, regelt, lesevorgänge, verweigerte, fokussiertes, einwickeln, permissions, undefined, http, warnung, regeln, ignoriert, stillen, ablehnungen, führen, behalten, hinterkopf, weitaus, sensibler, offenlegt, möglicherweise, andere, diesem, grund, schützen, strenger, erfordert, explizite, einige, ersten, mal, berechtigungsanfrage, erlauben, seitentab, could, contains, aktuellen, rufen, ebenfalls, diesmal, textinhalt, ergebnis, pausiert, bis, abgeschlossen, verweigert, befindet, ausgeführt, weshalb, niemals, davon, ausgehen, hello, from, zurückgibt, übersichtlichste, verwendung, innerhalb, funktion, jedem, rückmeldung, häufigste, aufgabe, nimmt, entgegen, ihn, fehlschlägt, bereitgestellt, basierte, systemzwischenablage, ersetzt, alten, synchronen, zurückgeben, daher, gut, kombinieren, lassen, unterscheiden, häufig, gemeinsam, ihnen, verwendet, ermöglichen, benutzeraktionen, abzufangen, ihrem, erlaubt, aktionen, direkt, einzuleiten, ereignissen, verwalten, sicherheitsanforderungen, intl, vibration, notifications, audio, webrtc, geolocation, websockets, service, midi, storage, validation, fullscreen, history, screen, orientation, push, webgl, battery, animations, apis, regexp, sticky, position, katastrophales, backtracking, lookahead, lookbehind, alternation, rückwärtsreferenzen, name, erfassungsgruppen, gierige, faule, sets, ranges, escaping, sonderzeichen, wortgrenze, mehrzeiliger, modus, anfang, ende, unicode, klasse, zeichenklassen, regex, regular, expressions, styling, slots, komposition, template, custom, elements, animation, indexeddb, localstorage, sessionstorage, cookies, cookie, storing, wiederaufnehmbarer, dateiupload, server, sent, xmlhttprequest, ursprungsübergreifende, anfragen, abbruch, download, fortschritt, formdata, network, requests, canvas, references, loop, macrotasks, selection, range, resizeobserver, intersectionobserver, mutation, observer, various, ressourcen, onload, onerror, scripts, defer, domcontentloaded, load, beforeunload, unload, resource, loading, fokussierung, focus, blur, formulareigenschaften, forms, controls, scrolling, tastatur, keydown, keyup, drag, drop, mausbewegungen, mausereignisse, grundlagen, auslösen, standard, browseraktionen, delegation, bubbling, capturing, introduction, koordinaten, fenstergrößen, scrollen, verändern, attribute, knoteneigenschaften, tag, getelement, queryselector, browserumgebung, spezifikationen, streams, filereader, textdecoder, textencoder, arraybuffer, binäre, binary, files, fensterübergreifende, kommunikation, popups, frames, windows, polyfills, transpiler, bigint, currying, eval, proxy, reflect, miscellaneous, dynamische, imports, export, import, module, modules, iteratoren, generators, iteration, promisification, callbacks, mixins, checking, instanceof, eingebaute, geschützte, statische, klassenvererbung, grundsyntax, classes, prototyp, __proto__, native, prototypale, vererbung, inheritance, widgets, performance, optimierung, debugging, kompatibilität, manipulationsbibliotheken, fortgeschrittene, techniken, manipulationstechniken, traversieren, arbeiten, manipulieren, knoten, getter, setter, deskriptoren, properties, configuration, closures, vertieft, binding, debounce, throttle, dekoratoren, weiterleitung, call, apply, setinterval, nfe, globales, alte, var, scope, rest, parameter, spread, rekursion, stack, tojson, datum, uhrzeit, destructuring, assignment, keys, values, entries, weakmap, weakset, map, iterables, strings, math, zahlen, primitiven, optional, operator, primitiv, konvertierung, symbol, garbage, collection, objektmethoden, basics, es6, funktionsausdrücke, schleifen, switch, bedingte, nullish, coalescing, logische, vergleichsoperatoren, typkonvertierungen, datentypen, use, strict, kommentare, basic, anmelden, durchsuchen, formatters, reverse, sha256, md5, length, calculator, colors, hsl, hex, mixer, converter, picker, general, kurse,
Text of the page (random words):
ipt clipboard api w3docs w3docs bücher html lernen css lernen javascript lernen git lernen java lernen php lernen python lernen kurse quizze übungen snippets tools general tools html editor password generator html encoder code diff json beautifier alle 13 color tools color picker color converter color mixer color hex colors hsl alle 10 string tools string length calculator md5 hash generator sha256 hash generator string reverse url encoder alle 19 code formatters javascript formatter css formatter html formatter json formatter php formatter w3docs durchsuchen k de english en deutsch de русский ru français fr español es português pt italiano it anmelden javascript lernen javascript basic einführung javascript verwenden js kommentare js mit dom js use strict js variablen js datentypen js typkonvertierungen js interaktive funktionen js operatoren js vergleichsoperatoren js logische operatoren js nullish coalescing js bedingte operatoren js switch js schleifen js funktionen js funktionsausdrücke js arrow functions js es6 objects the basics js objects js objekte kopieren js objektmethoden this js garbage collection js symbol typen js objekt zu primitiv konvertierung js konstruktor operator new js optional chaining data types js methoden von primitiven js zahlen js math js strings js arrays js array methoden js iterables js map und set js weakmap und weakset js object keys values entries js destructuring assignment js datum und uhrzeit js json methoden tojson advanced functions js rekursion und stack js rest parameter und spread syntax js variablen scope js das alte var js globales objekt js function objekt nfe js die new function syntax js settimeout und setinterval js dekoratoren und weiterleitung call apply js debounce throttle js function binding js arrow funktionen vertieft js closures object properties configuration js property flags und deskriptoren js property getter und setter javascript html dom dom einführung die dom knoten dom elemente auswählen den dom manipulieren arbeiten mit styles im dom event handling im dom dom traversieren dom manipulationstechniken formulare im dom verwenden fortgeschrittene dom techniken dom manipulationsbibliotheken dom browser kompatibilität dom barrierefreiheit debugging und tools performance optimierung interaktive elemente und widgets prototypes inheritance js prototypale vererbung js native prototypes js prototyp methoden objekte ohne __proto__ classes js class grundsyntax js klassenvererbung statische eigenschaften und methoden private und geschützte eigenschaften in js js eingebaute klassen erweitern js class checking instanceof js mixins error handling js fehlerbehandlung try catch js benutzerdefinierte fehler error erweitern promises async await js einführung callbacks js promise js promise chaining js fehlerbehandlung mit promises promise api promisification microtasks async await generators advanced iteration generatoren async iteratoren und generatoren modules module export und import dynamische imports miscellaneous proxy und reflect eval currying bigint js polyfills transpiler frames and windows popups und window methoden fensterübergreifende kommunikation binary data files arraybuffer binäre arrays textdecoder und textencoder blob file und filereader js streams api document browserumgebung spezifikationen suche getelement queryselector knoteneigenschaften typ tag und inhalt attribute und eigenschaften das dokument verändern styles und klassen fenstergrößen und scrollen koordinaten introduction to events javascript einführung in browser ereignisse bubbling und capturing event delegation standard browseraktionen benutzerdefinierte ereignisse auslösen ui events mausereignisse grundlagen mausbewegungen drag and drop tastatur keydown und keyup scrolling forms controls formulareigenschaften und methoden fokussierung focus blur events change input cut copy paste js clipboard api formulare ereignis und methode submit document and resource loading page domcontentloaded load beforeunload unload scripts async defer ressourcen laden onload und onerror various mutation observer js intersectionobserver js resizeobserver selection und range event loop microtasks und macrotasks javascript references canvas network requests fetch api formdata fetch download fortschritt fetch abbruch fetch ursprungsübergreifende anfragen url objekte xmlhttprequest js server sent events wiederaufnehmbarer dateiupload storing data in the browser cookies document cookie localstorage sessionstorage indexeddb animation css animationen javascript animationen web components web components custom elements shadow dom template element shadow dom slots komposition shadow dom styling shadow dom und events regular expressions js regex muster und flags zeichenklassen unicode flag u und klasse p anker string anfang und ende mehrzeiliger modus der anker flag m wortgrenze b escaping sonderzeichen sets und ranges quantoren und n gierige und faule quantoren erfassungsgruppen rückwärtsreferenzen im muster n und k name javascript alternation or lookahead und lookbehind katastrophales backtracking sticky flag y suche an position methoden von regexp und string javascript apis web animations api file api battery api webgl push api screen orientation api history api console api fullscreen api validation api web storage api web midi api js web workers service workers websockets geolocation webrtc web audio api notifications api die vibration api js intl api javascript clipboard api die moderne asynchrone javascript clipboard api text mit navigator clipboard lesen und kopieren rich data mit clipboarditem verwalten und sicherheitsanforderungen beachten die moderne clipboard api die über navigator clipboard bereitgestellt wird ist die asynchrone promise basierte methode zum lesen aus und schreiben in die systemzwischenablage sie ersetzt den alten synchronen ansatz document execcommand copy durch methoden die promises zurückgeben und sich daher gut mit async await kombinieren lassen die api ist von den cut copy und paste ereignissen der zwischenablage zu unterscheiden wird aber häufig gemeinsam mit ihnen verwendet die ereignisse ermöglichen es benutzeraktionen abzufangen während navigator clipboard es ihrem code erlaubt zwischenablage aktionen direkt einzuleiten text in die zwischenablage schreiben die häufigste aufgabe ist das kopieren von text navigator clipboard writetext text nimmt einen string entgegen schreibt ihn in die zwischenablage und gibt ein promise zurück das aufgelöst wird wenn der schreibvorgang erfolgreich war und abgelehnt wird wenn er fehlschlägt da es ein promise zurückgibt ist die übersichtlichste verwendung innerhalb einer async funktion mit try catch damit sie dem benutzer in jedem fall rückmeldung geben können button id copybtn copy button span id status span script const button document getelementbyid copybtn const status document getelementbyid status button addeventlistener click async try await navigator clipboard writetext hello from w3docs status textcontent copied catch err status textcontent copy failed console error clipboard write failed err script kopieren das await pausiert bis der schreibvorgang in die zwischenablage abgeschlossen ist wenn der benutzer die berechtigung verweigert hat oder die seite sich nicht in einem sicheren kontext befindet wird das promise abgelehnt und der catch block wird ausgeführt weshalb sie niemals davon ausgehen sollten dass das kopieren erfolgreich war text aus der zwischenablage lesen um den aktuellen text der zwischenablage zu lesen rufen sie navigator clipboard readtext auf es gibt ebenfalls ein promise zurück diesmal mit dem textinhalt der zwischenablage als ergebnis button id pastebtn read clipboard button p id output p script const button document getelementbyid pastebtn const output document getelementbyid output button addeventlistener click async try const text await navigator clipboard readtext output textcontent clipboard contains text catch err output textcontent could not read clipboard console error clipboard read failed err script kopieren das lesen ist weitaus sensibler als das schreiben da es den inhalt offenlegt den der benutzer kopiert hat möglicherweise ein passwort oder andere private daten aus diesem grund schützen browser readtext strenger es erfordert eine explizite benutzerinteraktion und einige browser zeigen beim ersten mal eine berechtigungsanfrage an oder erlauben das lesen nur wenn der seitentab fokussiert ist anforderungen und häufige fallstricke die clipboard api hat mehrere regeln die wenn ignoriert zu stillen ablehnungen führen behalten sie diese im hinterkopf wenn sie sie verwenden warnung die clipboard api funktioniert nur in einem sicheren kontext das bedeutet https oder localhost während der entwicklung auf einer einfachen http seite ist navigator clipboard in der regel undefined aufrufe erfordern außerdem generell eine benutzerinteraktion wie einen klick oder tastendruck sodass sie beim laden der seite fehlschlagen die permissions api regelt die berechtigungen clipboard read und clipboard write und lesevorgänge können den benutzer um erlaubnis bitten da jeder aufruf abgelehnt werden kann durch verweigerte berechtigung ein nicht fokussiertes dokument oder einen nicht unterstützten browser sollten sie zwischenablage aufrufe immer in try catch einwickeln die seite benötigt auch den fokus für viele zwischenablage operationen wenn sie readtext beispielsweise aus einem settimeout heraus aufrufen während der benutzer zu einem anderen tab gewechselt hat ist eine ablehnung mit dem fehler document is not focused zu erwarten beachten sie außerdem dass ein lesevorgang aus der zwischenablage erst möglich ist nachdem der benutzer ihre seite fokussiert und mit ihr interagiert hat rich daten mit clipboarditem kopieren text ist der einfache fall um nicht textdaten zu kopieren bilder html oder mehrere formate gleichzeitig verwenden sie navigator clipboard write das ein array von clipboarditem objekten entgegennimmt jedes clipboarditem ordnet mime typen ihren daten zu typischerweise ein blob das folgende beispiel lädt ein bild verpackt den resultierenden blob in ein clipboarditem und kopiert es async function copyimage url try const response await fetch url const blob await response blob const item new clipboarditem blob type blob await navigator clipboard write item console log image copied to clipboard catch err console error failed to copy image err kopieren der schlüssel im clipboarditem konstruktor ist der mime typ hier blob type z b image png und der wert sind die daten für diesen typ ein einzelnes element kann mehrere repräsentationen enthalten zum beispiel sowohl text plain als auch text html sodass die zielanwendung die beste auswählen kann das lesen von rich daten funktioniert analog mit navigator clipboard read das zu einem array von clipboarditem objekten aufgelöst wird die sie nach typ inspizieren async function readclipboarditems const items await navigator clipboard read for const item of items for const type of item types const blob await item gettype type console log found type blob kopieren hinweis die browser unterstützung für rich data methoden write und read mit clipboarditem ist eingeschränkter und weniger einheitlich als für die textmethoden bild mime typen variieren insbesondere je nach browser image png ist am zuverlässigsten prüfen sie mit if write in navigator clipboard die feature verfügbarkeit und greifen sie auf das kopieren von text oder einer url zurück wenn rich daten nicht verfügbar sind der legacy fallback vor der asynchronen api bedeutete kopieren ein element auszuwählen und document execcommand copy aufzurufen diese methode ist inzwischen veraltet funktioniert aber in älteren browsern noch sodass sie ausschließlich als fallback nützlich ist das typische muster wählte ein verstecktes textarea element aus und führte dann den befehl aus function copytextfallback text const textarea document createelement textarea textarea value text document body appendchild textarea textarea select document execcommand copy deprecated document body removechild textarea kopieren moderner code sollte die asynchrone api bevorzugen und nur zurückfallen wenn navigator clipboard fehlt async function copytext text if navigator clipboard await navigator clipboard writetext text else copytextfallback text kopieren praxisanwendungen die clipboard api ermöglicht viele kleine aber wertvolle interaktionen die sie täglich sehen code kopieren schaltflächen auf dokumentationsseiten damit leser einen ausschnitt ohne manuelle auswahl übernehmen können link zum teilen kopieren schaltflächen die eine url in die zwischenablage legen um sie in chats oder e mails einzufügen kopieren von generiertem output wie einem passwort einem api schlüssel oder einem formatierten zitat tipp was auch immer sie kopieren geben sie sichtbares feedback eine schaltfläche die still kopiert lässt benutzer im unklaren ob es funktioniert hat ändern sie die beschriftung zu kopiert zeigen sie einen kurzen toast an oder aktualisieren sie ein benachbartes statuselement das ist auch ein gewinn für die barrierefreiheit da bildschirmleser benutzer keinen zwischenablage hinweis vom browser selbst erhalten testen sie ihr wissen übung welche methode schreibt text in die zwischenablage und gibt ein promise zurück welche methode schreibt text in die zwischenablage und gibt ein promise zurück navigator clipboard writetext text document clipboard copy text navigator clipboard copytext text window clipboard set text prüfen übung warum sollte jeder clipboard api aufruf in einen try catch block eingeschlossen werden warum sollte jeder clipboard api aufruf in einen try catch block eingeschlossen werden die aufrufe können abgelehnt werden zum beispiel bei verweigerten berechtigungen einem nicht fokussierten dokument oder einem nicht unterstützten browser ohne try catch wird die zwischenablage automatisch geleert es ist erforderlich um die methoden asynchron zu machen prüfen übung welche aussagen über die clipboard api sind korrekt welche aussagen über die clipboard api sind korrekt sie funktioniert nur in einem sicheren kontext https oder localhost verwenden sie navigator clipboard write mit clipboarditem objekten um nicht textdaten wie bilder zu kopieren document execcommand copy ist der empfohlene moderne ansatz das lesen aus der zwischenablage ist stärker eingeschränkt als das schreiben und kann den benutzer um erlaubnis bitten prüfen was this page helpful yes no previous events change input cut copy paste next formulare ereignis und methode submit on this page text in die zwischenablage schreiben text aus der zwischenablage lesen anforderungen und häufige fallstricke rich daten mit clipboarditem kopieren der legacy fallback praxisanwendungen testen sie ihr wissen w3docs kostenlose tutorials beispiele übungen snippets und quizze für das web seit 2014 bücher html lernen css lernen javascript lernen git lernen java lernen php lernen python lernen üben übungen quizze probier editor tools ...
|
