{"id":21099,"date":"2018-08-02T16:37:51","date_gmt":"2018-08-02T14:37:51","guid":{"rendered":"https:\/\/www.inovex.de\/blog\/?p=13436"},"modified":"2022-12-02T09:13:42","modified_gmt":"2022-12-02T08:13:42","slug":"clipboard-api","status":"publish","type":"post","link":"https:\/\/www.inovex.de\/de\/blog\/clipboard-api\/","title":{"rendered":"Clipboard API [State of the Web]"},"content":{"rendered":"<p>Standard web browsers allow developers to\u00a0use the system clipboard. The Clipboard API is useful for customizing the copy\/cut\/paste actions. There are multiple scenarios, in which it makes sense to adapt the default behavior of these actions:<!--more--><\/p>\n<ul>\n<li>Reformatting the structure of the copied content<\/li>\n<li>Attaching metadata or adding external data to the content<\/li>\n<li>Copy\/cut\/paste on click (programmatic interface)<\/li>\n<li>Explicitly set the Content-Type (MIME-Type)<\/li>\n<\/ul>\n<p>This article is part of our <a href=\"https:\/\/www.inovex.de\/blog\/state-of-the-web-2018\/\" target=\"_blank\" rel=\"noopener\">State of the Web format<\/a> we publish on a regular basis. Check out our other articles about the newest tech related stuff on the web.<\/p>\n<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_82_2 counter-hierarchy ez-toc-counter ez-toc-custom ez-toc-container-direction\">\n<div class=\"ez-toc-title-container\"><p class=\"ez-toc-title\" style=\"cursor:inherit\"><\/p>\n<\/div><nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/www.inovex.de\/de\/blog\/clipboard-api\/#How-to-use\" >How to use<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/www.inovex.de\/de\/blog\/clipboard-api\/#Clipboard-Event-API\" >Clipboard Event API<\/a><ul class='ez-toc-list-level-4' ><li class='ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/www.inovex.de\/de\/blog\/clipboard-api\/#Using-the-Clipboard-Event-API-asynchronously\" >Using the Clipboard Event API asynchronously<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/www.inovex.de\/de\/blog\/clipboard-api\/#External-Library\" >External Library<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/www.inovex.de\/de\/blog\/clipboard-api\/#NEW-Asynchronous-Clipboard-API\" >NEW Asynchronous Clipboard API<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/www.inovex.de\/de\/blog\/clipboard-api\/#Conclusion\" >Conclusion<\/a><ul class='ez-toc-list-level-4' ><li class='ez-toc-heading-level-4'><ul class='ez-toc-list-level-4' ><li class='ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-7\" href=\"https:\/\/www.inovex.de\/de\/blog\/clipboard-api\/#Ressources-and-further-notes\" >Ressources and further notes<\/a><\/li><\/ul><\/li><\/ul><\/li><\/ul><\/nav><\/div>\n<h2><span class=\"ez-toc-section\" id=\"How-to-use\"><\/span>How to use<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>There are two ways of dealing with the system clipboard. The first one, representing the currently most supported way is the Clipboard Event API, which lacks consistency and security. The second one is the upcoming way that aims to fix those issues.<\/p>\n<ol>\n<li>Clipboard Event API, based on clipboard events<\/li>\n<li>Asynchronous Clipboard API for extended programmatic use<\/li>\n<\/ol>\n<h3><span class=\"ez-toc-section\" id=\"Clipboard-Event-API\"><\/span>Clipboard Event API<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>The Event API allows the developer to overwrite the default copy\/cut\/paste events by adding an event listener to the document and call the <code>setData<\/code> and <code>getData<\/code>\u00a0method of the clipboard object. The examples in this article aim for the copy events.<\/p>\n<p>To execute a clipboard event programmatically, <code>document.execCommand<\/code> can be used, which is supported by all standard web browsers. However, the functionality varies between browsers, as it can be seen in this \u201cCan I use\u201c <a href=\"https:\/\/caniuse.com\/#search=clipboard\" target=\"_blank\" rel=\"noopener\">Synchronous Clipboard API<\/a> chart. \u201cSynchronous\u201c in this context means that the clipboard action must be initiated by the user manually, which is needed for <a href=\"https:\/\/developers.google.com\/web\/updates\/2018\/03\/clipboardapi#security_and_permissions\" target=\"_blank\" rel=\"noopener\">several security reasons<\/a>.<\/p>\n<p>The code shows that additionally to the <code>execCommand<\/code> method, an eventListener for the <code>copy<\/code> event has to be set temporarily so that only the button click can overwrite the clipboards content.<\/p>\n<p>A note about reading from the clipboard: Fortunately, the <code>execCommand ('paste')<\/code> is only supported by Internet Explorer. Other browsers only let the clipboard content be read by the application, if the user manually pastes something. See the next example:<\/p>\n<h4><span class=\"ez-toc-section\" id=\"Using-the-Clipboard-Event-API-asynchronously\"><\/span>Using the Clipboard Event API asynchronously<span class=\"ez-toc-section-end\"><\/span><\/h4>\n<p><a href=\"https:\/\/www.inovex.de\/wp-content\/uploads\/2018\/07\/Clipboard_Event_API_async.svg\"><img decoding=\"async\" class=\"aligncenter size-medium wp-image-13445\" src=\"https:\/\/www.inovex.de\/wp-content\/uploads\/2018\/07\/Clipboard_Event_API_async.svg\" alt=\"Clipboard Event API async\" width=\"100%\" height=\"1\" \/><\/a><\/p>\n<p>In case of asynchronously getting the data that should be copied into the clipboard after the user executed the copy request, browsers implemented timed conditions in order to ensure that the user intentionally wanted to do so. See this <a href=\"http:\/\/hansifer.com\/clipboardCopyTest.html\" target=\"_blank\" rel=\"noopener\">summary<\/a> for detailed information.<\/p>\n<h4><span class=\"ez-toc-section\" id=\"External-Library\"><\/span>External Library<span class=\"ez-toc-section-end\"><\/span><\/h4>\n<p>To facilitate the functionality between browsers, the <a href=\"https:\/\/clipboardjs.com\/\" target=\"_blank\" rel=\"noopener\">clipboard.js<\/a> library was built. It works out of the box for all <a href=\"https:\/\/clipboardjs.com\/#browser-support\" target=\"_blank\" rel=\"noopener\">standard web browsers<\/a> and has a simplified API for common clipboard use cases. What the clipboard.js library does internally is creating a fake <code>textarea<\/code> element, setting its values from the given text and making a selection on it, as seen in the code on <a href=\"https:\/\/github.com\/zenorocha\/clipboard.js\/blob\/master\/src\/common\/create-fake-element.js\" target=\"_blank\" rel=\"noopener\">GitHub<\/a>. Having a focused, editable field on the DOM is a security feature from the past, which is still needed to be fulfilled as can be seen on \u201cCan I use\u201c. Clipboard.js meets all the various security conditions.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"NEW-Asynchronous-Clipboard-API\"><\/span>NEW Asynchronous Clipboard API<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>The current approach has several disadvantages regarding security for the user and ease of use for the developer:<\/p>\n<ul>\n<li>The older Clipboard Event API which was discussed above is synchronous, so the clipboard transfer is blocking the whole page (this is especially bad when having large content, e.g. images)<\/li>\n<li>Security issues like silently writing malicious content to the clipboard or reading sensitive data<\/li>\n<li>Browser implementations of <code>execCommand<\/code> differ widely<\/li>\n<li>Implementing a stable version working in all major browsers additionally requires the <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/Selection\">Selection API<\/a> in order to create quite a weird code construct<\/li>\n<\/ul>\n<p>In the W3C Editors Draft the proposed <a href=\"https:\/\/w3c.github.io\/clipboard-apis\/\">Asynchronous Clipboard API<\/a> is documented. Since the end of April 2018, the first browser which supports initial parts of the new features is <a href=\"https:\/\/developers.google.com\/web\/updates\/2018\/03\/clipboardapi\">Chrome (v66 and up)<\/a>.<\/p>\n<p>Mainly the new API contains<\/p>\n<ul>\n<li>The <code>navigator.clipboard<\/code> object<\/li>\n<li>Basic functionality for reading and writing clipboard data using promises<\/li>\n<li>A <code>clipboardchange<\/code> event to globally detect clipboard changes<\/li>\n<\/ul>\n<p>As with many new APIs, <code>navigator.clipboard<\/code> is only supported for pages served over localhost and HTTPS. Additionally, reading from the clipboard always requires permission, while writing to the clipboard can be handled without permission as long as the browser tab is active. The permissions can be manually configured in the <a href=\"https:\/\/w3c.github.io\/clipboard-apis\/#clipboard-permissions\">Permissions API<\/a>.<\/p>\n<p>As can be seen in the code example above, one use case taking advantage of the new API is making a fetch request on a button click and copying the body content into the clipboard when loaded. With the new API, even long requests and other asynchronous function calls are working properly. Here is an example with <a href=\"https:\/\/jsfiddle.net\/dan8\/ok2pjzkd\/5\/\">copy to clipboard after a setTimeout<\/a>.\u00a0The <code>clipboardchange<\/code> event will be useful listening to for recognizing system clipboard changes.<\/p>\n<p>The idea is, that a web application could also detect changes outside of the browser. If the user copies something from the system, the change event should fire as soon as the user comes back to the web app. There are still open controversial security discussions happening about this listener and to date the <code>clipboardchange<\/code> event is not supported by any browser!<\/p>\n<h2><span class=\"ez-toc-section\" id=\"Conclusion\"><\/span>Conclusion<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Currently, the clipboard.js library is the most stable and and widely used method for accessing the clipboard from web browsers.<\/p>\n<p>For the Asynchronous API,\u00a0 there are still some open questions such as the fact that writing to the clipboard does not request any permission by default. As a result the clipboard content could be overwritten by malicious data which leads to a\u00a0really bad user experience. For more information about potential abuse of the clipboard, <a href=\"https:\/\/github.com\/w3c\/clipboard-apis\/blob\/master\/explainer.adoc#potential-for-abuse-when-accessing-clipboard-data\">read here<\/a>.<\/p>\n<p>The Editor\u2019s Working Draft is pretty promising though. Browsers other than Chrome (v66 and up) should support it in the near future. For all curios bleeding edge testers out there, the new API can be safely used with a conditional fallback implementation as explained on <a href=\"https:\/\/stackoverflow.com\/questions\/400212\/how-do-i-copy-to-the-clipboard-in-javascript\/30810322\">Stack Overflow<\/a> by Dean Taylor.<\/p>\n<h4><span class=\"ez-toc-section\" id=\"Ressources-and-further-notes\"><\/span>Ressources and further notes<span class=\"ez-toc-section-end\"><\/span><\/h4>\n<ul>\n<li><a href=\"https:\/\/w3c.github.io\/clipboard-apis\/\">https:\/\/w3c.github.io\/clipboard-apis\/<\/a><\/li>\n<li><a href=\"https:\/\/github.com\/w3c\/clipboard-apis\/blob\/master\/explainer.adoc\">https:\/\/github.com\/w3c\/clipboard-apis\/blob\/master\/explainer.adoc<\/a><\/li>\n<li><a href=\"https:\/\/developers.google.com\/web\/updates\/2018\/03\/clipboardapi\">https:\/\/developers.google.com\/web\/updates\/2018\/03\/clipboardapi<\/a><\/li>\n<li><a href=\"https:\/\/medium.com\/@harrisrobin\/an-introduction-to-the-new-async-clipboard-api-7e6567685a05\">https:\/\/medium.com\/@harrisrobin\/an-introduction-to-the-new-async-clipboard-api-7e6567685a05<\/a><\/li>\n<li><a href=\"https:\/\/stackoverflow.com\/questions\/400212\/how-do-i-copy-to-the-clipboard-in-javascript\/30810322\">https:\/\/stackoverflow.com\/questions\/400212\/how-do-i-copy-to-the-clipboard-in-javascript\/30810322<\/a><\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>Standard web browsers allow developers to\u00a0use the system clipboard. The Clipboard API is useful for customizing the copy\/cut\/paste actions. There are multiple scenarios, in which it makes sense to adapt the default behavior of these actions:<\/p>\n","protected":false},"author":29,"featured_media":13596,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"inline_featured_image":false,"ep_exclude_from_search":false,"footnotes":""},"tags":[70],"service":[420,444],"coauthors":[{"id":29,"display_name":"Daniel Eckelt","user_nicename":"deckelt"}],"class_list":["post-21099","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","tag-web","service-apps","service-frontend"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.5 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>The Clipboard API [State of the Web 2018]<\/title>\n<meta name=\"description\" content=\"The Clipboard API is useful for customizing copy\/cut\/paste actions in the browser, eg. for reformatting the structure of the copied content, attaching metadata or adding external data to the content, copy\/cut\/paste on click or explicitly setting the content type. Let&#039;s dive in.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.inovex.de\/de\/blog\/clipboard-api\/\" \/>\n<meta property=\"og:locale\" content=\"de_DE\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"The Clipboard API [State of the Web 2018]\" \/>\n<meta property=\"og:description\" content=\"The Clipboard API is useful for customizing copy\/cut\/paste actions in the browser, eg. for reformatting the structure of the copied content, attaching metadata or adding external data to the content, copy\/cut\/paste on click or explicitly setting the content type. Let&#039;s dive in.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.inovex.de\/de\/blog\/clipboard-api\/\" \/>\n<meta property=\"og:site_name\" content=\"inovex GmbH\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/inovexde\" \/>\n<meta property=\"article:published_time\" content=\"2018-08-02T14:37:51+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2022-12-02T08:13:42+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.inovex.de\/wp-content\/uploads\/2018\/07\/Clipboard-API.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1920\" \/>\n\t<meta property=\"og:image:height\" content=\"1080\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Daniel Eckelt\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:image\" content=\"https:\/\/www.inovex.de\/wp-content\/uploads\/2018\/07\/Clipboard-API-1024x576.png\" \/>\n<meta name=\"twitter:creator\" content=\"@inovexgmbh\" \/>\n<meta name=\"twitter:site\" content=\"@inovexgmbh\" \/>\n<meta name=\"twitter:label1\" content=\"Verfasst von\" \/>\n\t<meta name=\"twitter:data1\" content=\"Daniel Eckelt\" \/>\n\t<meta name=\"twitter:label2\" content=\"Gesch\u00e4tzte Lesezeit\" \/>\n\t<meta name=\"twitter:data2\" content=\"5\u00a0Minuten\" \/>\n\t<meta name=\"twitter:label3\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data3\" content=\"Daniel Eckelt\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.inovex.de\\\/de\\\/blog\\\/clipboard-api\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.inovex.de\\\/de\\\/blog\\\/clipboard-api\\\/\"},\"author\":{\"name\":\"Daniel Eckelt\",\"@id\":\"https:\\\/\\\/www.inovex.de\\\/de\\\/#\\\/schema\\\/person\\\/91fffe365c2311c98b1818e45b989db5\"},\"headline\":\"Clipboard API [State of the Web]\",\"datePublished\":\"2018-08-02T14:37:51+00:00\",\"dateModified\":\"2022-12-02T08:13:42+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.inovex.de\\\/de\\\/blog\\\/clipboard-api\\\/\"},\"wordCount\":996,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\\\/\\\/www.inovex.de\\\/de\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/www.inovex.de\\\/de\\\/blog\\\/clipboard-api\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.inovex.de\\\/wp-content\\\/uploads\\\/2018\\\/07\\\/Clipboard-API.png\",\"keywords\":[\"Web\"],\"articleSection\":[\"Applications\",\"English Content\",\"General\"],\"inLanguage\":\"de\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.inovex.de\\\/de\\\/blog\\\/clipboard-api\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.inovex.de\\\/de\\\/blog\\\/clipboard-api\\\/\",\"url\":\"https:\\\/\\\/www.inovex.de\\\/de\\\/blog\\\/clipboard-api\\\/\",\"name\":\"The Clipboard API [State of the Web 2018]\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.inovex.de\\\/de\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.inovex.de\\\/de\\\/blog\\\/clipboard-api\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.inovex.de\\\/de\\\/blog\\\/clipboard-api\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.inovex.de\\\/wp-content\\\/uploads\\\/2018\\\/07\\\/Clipboard-API.png\",\"datePublished\":\"2018-08-02T14:37:51+00:00\",\"dateModified\":\"2022-12-02T08:13:42+00:00\",\"description\":\"The Clipboard API is useful for customizing copy\\\/cut\\\/paste actions in the browser, eg. for reformatting the structure of the copied content, attaching metadata or adding external data to the content, copy\\\/cut\\\/paste on click or explicitly setting the content type. Let's dive in.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.inovex.de\\\/de\\\/blog\\\/clipboard-api\\\/#breadcrumb\"},\"inLanguage\":\"de\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.inovex.de\\\/de\\\/blog\\\/clipboard-api\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"de\",\"@id\":\"https:\\\/\\\/www.inovex.de\\\/de\\\/blog\\\/clipboard-api\\\/#primaryimage\",\"url\":\"https:\\\/\\\/www.inovex.de\\\/wp-content\\\/uploads\\\/2018\\\/07\\\/Clipboard-API.png\",\"contentUrl\":\"https:\\\/\\\/www.inovex.de\\\/wp-content\\\/uploads\\\/2018\\\/07\\\/Clipboard-API.png\",\"width\":1920,\"height\":1080,\"caption\":\"Clipboard API State of the Web\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.inovex.de\\\/de\\\/blog\\\/clipboard-api\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.inovex.de\\\/de\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Clipboard API [State of the Web]\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.inovex.de\\\/de\\\/#website\",\"url\":\"https:\\\/\\\/www.inovex.de\\\/de\\\/\",\"name\":\"inovex GmbH\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.inovex.de\\\/de\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.inovex.de\\\/de\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"de\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.inovex.de\\\/de\\\/#organization\",\"name\":\"inovex GmbH\",\"url\":\"https:\\\/\\\/www.inovex.de\\\/de\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"de\",\"@id\":\"https:\\\/\\\/www.inovex.de\\\/de\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/www.inovex.de\\\/wp-content\\\/uploads\\\/2021\\\/03\\\/inovex-logo-16-9-1.png\",\"contentUrl\":\"https:\\\/\\\/www.inovex.de\\\/wp-content\\\/uploads\\\/2021\\\/03\\\/inovex-logo-16-9-1.png\",\"width\":1921,\"height\":1081,\"caption\":\"inovex GmbH\"},\"image\":{\"@id\":\"https:\\\/\\\/www.inovex.de\\\/de\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/www.facebook.com\\\/inovexde\",\"https:\\\/\\\/x.com\\\/inovexgmbh\",\"https:\\\/\\\/www.instagram.com\\\/inovexlife\\\/\",\"https:\\\/\\\/www.linkedin.com\\\/company\\\/inovex\",\"https:\\\/\\\/www.youtube.com\\\/channel\\\/UC7r66GT14hROB_RQsQBAQUQ\"]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.inovex.de\\\/de\\\/#\\\/schema\\\/person\\\/91fffe365c2311c98b1818e45b989db5\",\"name\":\"Daniel Eckelt\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"de\",\"@id\":\"https:\\\/\\\/www.inovex.de\\\/wp-content\\\/uploads\\\/daniel-eckelt_9166-mittel-96x96.jpg3b89ef212a06b595edab827642fa13e4\",\"url\":\"https:\\\/\\\/www.inovex.de\\\/wp-content\\\/uploads\\\/daniel-eckelt_9166-mittel-96x96.jpg\",\"contentUrl\":\"https:\\\/\\\/www.inovex.de\\\/wp-content\\\/uploads\\\/daniel-eckelt_9166-mittel-96x96.jpg\",\"caption\":\"Daniel Eckelt\"},\"description\":\"Daniel arbeitet leidenschaftlich gerne im Frontend und sieht den Endnutzer stets im Zentrum seiner Arbeit. Dabei verfolgt er das Ziel, Produkte zu schaffen, die nicht nur funktional sind, sondern auch eine positive Erfahrung f\u00fcr den Benutzer bieten. Um diesem Anspruch gerecht zu werden, besch\u00e4ftigt er sich intensiv mit den neuesten Trends und Technologien im Bereich der Webentwicklung. Au\u00dferdem betreut er verschiedene Abschlussarbeiten im Bereich Web.\",\"url\":\"https:\\\/\\\/www.inovex.de\\\/de\\\/blog\\\/author\\\/deckelt\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"The Clipboard API [State of the Web 2018]","description":"The Clipboard API is useful for customizing copy\/cut\/paste actions in the browser, eg. for reformatting the structure of the copied content, attaching metadata or adding external data to the content, copy\/cut\/paste on click or explicitly setting the content type. Let's dive in.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.inovex.de\/de\/blog\/clipboard-api\/","og_locale":"de_DE","og_type":"article","og_title":"The Clipboard API [State of the Web 2018]","og_description":"The Clipboard API is useful for customizing copy\/cut\/paste actions in the browser, eg. for reformatting the structure of the copied content, attaching metadata or adding external data to the content, copy\/cut\/paste on click or explicitly setting the content type. Let's dive in.","og_url":"https:\/\/www.inovex.de\/de\/blog\/clipboard-api\/","og_site_name":"inovex GmbH","article_publisher":"https:\/\/www.facebook.com\/inovexde","article_published_time":"2018-08-02T14:37:51+00:00","article_modified_time":"2022-12-02T08:13:42+00:00","og_image":[{"width":1920,"height":1080,"url":"https:\/\/www.inovex.de\/wp-content\/uploads\/2018\/07\/Clipboard-API.png","type":"image\/png"}],"author":"Daniel Eckelt","twitter_card":"summary_large_image","twitter_image":"https:\/\/www.inovex.de\/wp-content\/uploads\/2018\/07\/Clipboard-API-1024x576.png","twitter_creator":"@inovexgmbh","twitter_site":"@inovexgmbh","twitter_misc":{"Verfasst von":"Daniel Eckelt","Gesch\u00e4tzte Lesezeit":"5\u00a0Minuten","Written by":"Daniel Eckelt"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.inovex.de\/de\/blog\/clipboard-api\/#article","isPartOf":{"@id":"https:\/\/www.inovex.de\/de\/blog\/clipboard-api\/"},"author":{"name":"Daniel Eckelt","@id":"https:\/\/www.inovex.de\/de\/#\/schema\/person\/91fffe365c2311c98b1818e45b989db5"},"headline":"Clipboard API [State of the Web]","datePublished":"2018-08-02T14:37:51+00:00","dateModified":"2022-12-02T08:13:42+00:00","mainEntityOfPage":{"@id":"https:\/\/www.inovex.de\/de\/blog\/clipboard-api\/"},"wordCount":996,"commentCount":0,"publisher":{"@id":"https:\/\/www.inovex.de\/de\/#organization"},"image":{"@id":"https:\/\/www.inovex.de\/de\/blog\/clipboard-api\/#primaryimage"},"thumbnailUrl":"https:\/\/www.inovex.de\/wp-content\/uploads\/2018\/07\/Clipboard-API.png","keywords":["Web"],"articleSection":["Applications","English Content","General"],"inLanguage":"de","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.inovex.de\/de\/blog\/clipboard-api\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.inovex.de\/de\/blog\/clipboard-api\/","url":"https:\/\/www.inovex.de\/de\/blog\/clipboard-api\/","name":"The Clipboard API [State of the Web 2018]","isPartOf":{"@id":"https:\/\/www.inovex.de\/de\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.inovex.de\/de\/blog\/clipboard-api\/#primaryimage"},"image":{"@id":"https:\/\/www.inovex.de\/de\/blog\/clipboard-api\/#primaryimage"},"thumbnailUrl":"https:\/\/www.inovex.de\/wp-content\/uploads\/2018\/07\/Clipboard-API.png","datePublished":"2018-08-02T14:37:51+00:00","dateModified":"2022-12-02T08:13:42+00:00","description":"The Clipboard API is useful for customizing copy\/cut\/paste actions in the browser, eg. for reformatting the structure of the copied content, attaching metadata or adding external data to the content, copy\/cut\/paste on click or explicitly setting the content type. Let's dive in.","breadcrumb":{"@id":"https:\/\/www.inovex.de\/de\/blog\/clipboard-api\/#breadcrumb"},"inLanguage":"de","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.inovex.de\/de\/blog\/clipboard-api\/"]}]},{"@type":"ImageObject","inLanguage":"de","@id":"https:\/\/www.inovex.de\/de\/blog\/clipboard-api\/#primaryimage","url":"https:\/\/www.inovex.de\/wp-content\/uploads\/2018\/07\/Clipboard-API.png","contentUrl":"https:\/\/www.inovex.de\/wp-content\/uploads\/2018\/07\/Clipboard-API.png","width":1920,"height":1080,"caption":"Clipboard API State of the Web"},{"@type":"BreadcrumbList","@id":"https:\/\/www.inovex.de\/de\/blog\/clipboard-api\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.inovex.de\/de\/"},{"@type":"ListItem","position":2,"name":"Clipboard API [State of the Web]"}]},{"@type":"WebSite","@id":"https:\/\/www.inovex.de\/de\/#website","url":"https:\/\/www.inovex.de\/de\/","name":"inovex GmbH","description":"","publisher":{"@id":"https:\/\/www.inovex.de\/de\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.inovex.de\/de\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"de"},{"@type":"Organization","@id":"https:\/\/www.inovex.de\/de\/#organization","name":"inovex GmbH","url":"https:\/\/www.inovex.de\/de\/","logo":{"@type":"ImageObject","inLanguage":"de","@id":"https:\/\/www.inovex.de\/de\/#\/schema\/logo\/image\/","url":"https:\/\/www.inovex.de\/wp-content\/uploads\/2021\/03\/inovex-logo-16-9-1.png","contentUrl":"https:\/\/www.inovex.de\/wp-content\/uploads\/2021\/03\/inovex-logo-16-9-1.png","width":1921,"height":1081,"caption":"inovex GmbH"},"image":{"@id":"https:\/\/www.inovex.de\/de\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/inovexde","https:\/\/x.com\/inovexgmbh","https:\/\/www.instagram.com\/inovexlife\/","https:\/\/www.linkedin.com\/company\/inovex","https:\/\/www.youtube.com\/channel\/UC7r66GT14hROB_RQsQBAQUQ"]},{"@type":"Person","@id":"https:\/\/www.inovex.de\/de\/#\/schema\/person\/91fffe365c2311c98b1818e45b989db5","name":"Daniel Eckelt","image":{"@type":"ImageObject","inLanguage":"de","@id":"https:\/\/www.inovex.de\/wp-content\/uploads\/daniel-eckelt_9166-mittel-96x96.jpg3b89ef212a06b595edab827642fa13e4","url":"https:\/\/www.inovex.de\/wp-content\/uploads\/daniel-eckelt_9166-mittel-96x96.jpg","contentUrl":"https:\/\/www.inovex.de\/wp-content\/uploads\/daniel-eckelt_9166-mittel-96x96.jpg","caption":"Daniel Eckelt"},"description":"Daniel arbeitet leidenschaftlich gerne im Frontend und sieht den Endnutzer stets im Zentrum seiner Arbeit. Dabei verfolgt er das Ziel, Produkte zu schaffen, die nicht nur funktional sind, sondern auch eine positive Erfahrung f\u00fcr den Benutzer bieten. Um diesem Anspruch gerecht zu werden, besch\u00e4ftigt er sich intensiv mit den neuesten Trends und Technologien im Bereich der Webentwicklung. Au\u00dferdem betreut er verschiedene Abschlussarbeiten im Bereich Web.","url":"https:\/\/www.inovex.de\/de\/blog\/author\/deckelt\/"}]}},"_links":{"self":[{"href":"https:\/\/www.inovex.de\/de\/wp-json\/wp\/v2\/posts\/21099","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.inovex.de\/de\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.inovex.de\/de\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.inovex.de\/de\/wp-json\/wp\/v2\/users\/29"}],"replies":[{"embeddable":true,"href":"https:\/\/www.inovex.de\/de\/wp-json\/wp\/v2\/comments?post=21099"}],"version-history":[{"count":3,"href":"https:\/\/www.inovex.de\/de\/wp-json\/wp\/v2\/posts\/21099\/revisions"}],"predecessor-version":[{"id":34079,"href":"https:\/\/www.inovex.de\/de\/wp-json\/wp\/v2\/posts\/21099\/revisions\/34079"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.inovex.de\/de\/wp-json\/wp\/v2\/media\/13596"}],"wp:attachment":[{"href":"https:\/\/www.inovex.de\/de\/wp-json\/wp\/v2\/media?parent=21099"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.inovex.de\/de\/wp-json\/wp\/v2\/tags?post=21099"},{"taxonomy":"service","embeddable":true,"href":"https:\/\/www.inovex.de\/de\/wp-json\/wp\/v2\/service?post=21099"},{"taxonomy":"author","embeddable":true,"href":"https:\/\/www.inovex.de\/de\/wp-json\/wp\/v2\/coauthors?post=21099"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}