{"id":3136,"date":"2024-07-31T09:22:50","date_gmt":"2024-07-31T14:22:50","guid":{"rendered":"https:\/\/frontendmasters.com\/blog\/?p=3136"},"modified":"2024-08-23T11:58:40","modified_gmt":"2024-08-23T16:58:40","slug":"reading-from-the-clipboard-in-javascript","status":"publish","type":"post","link":"https:\/\/frontendmasters.com\/blog\/reading-from-the-clipboard-in-javascript\/","title":{"rendered":"Reading from the Clipboard in JavaScript"},"content":{"rendered":"\n

Browsers have excellent support for reading and writing the user’s clipboard, and this opens up possibilities for better, and more native like<\/em> experiences on the web. On websites that use these APIs for helpful features, it feels natural to the user. On sites where it isn’t<\/em> supported, it almost feels like a bug. In this series of articles, I’m going to demonstrate how to work with the clipboard.<\/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

    Clipboard functionality on the web requires a “secure context”. So if you’re running an http<\/code> site (as opposed to an https<\/code> site), these features will not work. I\u2019d highly encourage you to get your site on https<\/code>. That being said, these features, and others like them that require secure contexts, will<\/em> 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

    Also note that some browsers will manipulate<\/em> the content of the clipboard when read. This is done for security reasons and you can<\/em> disable it. I’ll demonstrate this later in the article.<\/p>\n\n\n\n

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

    The Clipboard API<\/a> is the top-level object (navigator.clipboard<\/code>) containing the methods to work with the clipboard. According to MDN, support is pretty much across the board:<\/p>\n\n\n

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

    In fact, the only outlier relates to being able to disable the security aspects mentioned above in Firefox and Safari. Outside of that, support is great.<\/p>\n\n\n\n

    Reading the Clipboard<\/h3>\n\n\n\n

    Reading from the clipboard is handled by two methods:<\/p>\n\n\n\n