{"id":3629,"date":"2024-08-23T11:57:43","date_gmt":"2024-08-23T16:57:43","guid":{"rendered":"https:\/\/frontendmasters.com\/blog\/?p=3629"},"modified":"2024-08-23T11:57:44","modified_gmt":"2024-08-23T16:57:44","slug":"writing-to-the-clipboard-in-javascript","status":"publish","type":"post","link":"https:\/\/frontendmasters.com\/blog\/writing-to-the-clipboard-in-javascript\/","title":{"rendered":"Writing to the Clipboard in JavaScript"},"content":{"rendered":"\n

In my last article<\/a>, I showed you how to enable your website to read a visitor’s clipboard. Now I’m going to follow up that guide with a look at writing<\/em> to the clipboard. It goes without saying that in any use of this type of functionality, you should proceed with care and, most of all, respect for your visitors. I’ll talk a bit about what that means later in the article, but for now, let’s look at the API.<\/p>\n\n\n

\n
\n

Article Series<\/h3>\n <\/header>\n
\n
    \n
  1. \n Reading from the Clipboard in JavaScript<\/a>\n <\/li>\n
  2. \n Writing to the Clipboard in JavaScript<\/a>\n <\/li>\n
  3. \n Handling Paste Events in JavaScript<\/a>\n <\/li>\n <\/ol>\n <\/div>\n<\/div>\n\n\n\n

    Before we begin…<\/h2>\n\n\n\n

    As I said last time, clipboard functionality on the web requires a “secure context”. So if you’re running an http site (as opposed to an https site), these features will not work. I’d highly encourage you to get your site on https. That being said, these features, and others like them that require secure contexts, will still work on http:\/\/localhost<\/code>. There’s no need to set up a temporary certificate when doing local testing.<\/p>\n\n\n\n

    The Clipboard API<\/h2>\n\n\n\n

    I covered this last time, but in case you didn’t read the previous article in this series, the Clipboard API<\/a> is supported in JavaScript via navigator.clipboard<\/code> and has excellent cross-platform support:<\/p>\n\n\n

    \n
    \"\"<\/figure>\n<\/div>\n\n\n

    This feature will also prompt the user for permission so remember to handle cases where they reject the request.<\/p>\n\n\n\n

    Writing to the Clipboard<\/h2>\n\n\n\n

    When I last discussed the clipboard API, I mentioned how it had two APIs for reading from the clipboard, we had a readText<\/code> method tailored for, you guessed it, reading text, and a more generic read<\/code> method for handling complex data. Unsurprisingly, we’ve got the same on the write side:<\/p>\n\n\n\n