JavaScript 101: Accessing the Clipboard | by Fernando Doglio | May, 2022

It’s loads simpler than you assume!

We don’t often assume an excessive amount of about it as a result of in any case if the consumer desires to get one thing from our web page into the clipboard, they’ll simply choose it, right-click it, and click on on “Copy”. Simple proper?

However what if they’ll’t? What if for some cause they’ve restricted entry to further mouse buttons and even keyboard keys?

Or heck, what if what they need to copy isn’t seen? Have you ever ever seen the basic put up on Twitter about Wordle?

You get all that textual content and packing containers by clicking a single “Share” button, there isn’t any means you could find that wherever on their web site. So how are they doing it?

It’s fairly simple really, and at the moment I’m going to point out you precisely easy methods to work together with the clipboard.

Apart from Web Explorer, most different trendy browsers have entry to the navigator.clipboard world object, which is the way you’d need to work together with the clipboard in trendy internet functions.

This world object has a number of attention-grabbing strategies that we’re going to be utilizing:

  • readText : this technique returns any textual content you would possibly’ve beforehand copied into the clipboard.
  • learn : this technique works like readText but it surely returns any kind of knowledge (like photographs) that could be contained in the clipboard.
  • writeText : this technique lets you copy solely textual content into the clipboard.
  • write : as you possibly can most likely guess, with this technique we will copy arbitrary information into the clipboard. This specific technique can be utilized to implement the Copy command that we natively get by urgent CTRL+C.

It’s additionally necessary to say that these strategies require particular permission to be enabled by the consumer. One for writing (clipboard-write ) and one for studying (clipboard-read ). I’ll present you in a minute easy methods to test for it, to ensure your code will work.

Let’s begin with the simple one: easy methods to copy one thing into the clipboard utilizing JavaScript.

So let’s create a easy web page with a textarea factor, and a button that may allow you to copy no matter you need to write into it:

As you possibly can see, I’m simply utilizing Vanilla JavaScript, we don’t want a framework to know the clipboard.

The very first thing I do, after getting the TextArea’s reference utilizing the doc.getElementById technique, is to question the permissions API to ensure I’ve the proper ones. That is fairly customary, and by default we must always have the ability to do that. Then we simply writeText the worth inside our TextArea factor (line 12).

A word on information dimension: I used to be not capable of finding official documentation stating the precise dimension limits of the clipboard. That means you possibly can doubtlessly use this technique to repeat big quantities of data into it. That stated, I might not encourage it, because the clipboard isn’t a safe retailer. Any utility can entry it and even worst, overwrite it.

Copying a picture into the clipboard

Writing textual content is simple, however what in the event you wished to repeat one thing else, like a picture? Then we will’t use the writeText technique — clearly — and we’ll should resort to the extra generic write technique.

In essence, the strategy works the identical, however as a substitute of passing our information straight, it expects an array of ClipboardItem parts. In different phrases, no matter we need to copy must be wrapped right into a container object, that means it is aware of easy methods to cope with any kind of binary information.

Don’t fear although, that appears like a whole lot of work, but it surely’s fairly easy. Right here is an instance:

For this instance, I’m utilizing the HTML IMG tag simply to get the src attribute, since I can’t actually use the factor straight. The API wants me to show the picture right into a Blob (which is basically a means of claiming “It’s an enormous chunk of I don’t know precisely”). And because the DOM API doesn’t have any strategies I can use, I’m fetching the precise picture after which calling the blob technique on the response object (line 11).

The remaining is as anticipated, I create a one-element array with a ClipboardItem containing the blob, after which I write the array into the clipboard.

You should use the above instance to extrapolate how you’ll go about copying one thing else, like an XLS file. It is advisable fetch it, blob it, and be sure you used the proper mime-type, which is the string I’ve on the kind variable. For those who don’t know what’s the mime-type in your file, simply Google “mime-type for <your file’s extension right here>” and also you’ll have it.

I’m not going to enter a whole lot of element right here, as a result of as you’re about to see, the mechanics are the identical as for writing into it.

You need to be sure you have the proper permissions, after which use both learn or readText .

Since we’re attempting to make this a bit attention-grabbing, I’m going to create a web page that allows you to paste a picture that you’ve in your clipboard, copied from who is aware of the place.

You may see each, the earlier instance copying the picture into the clipboard and the brand new one, pasting it, into a neighborhood factor.

Right here is the code for the latter:

Essentially the most important half right here is that we have to do not forget that once we name write we cross an array, so the learn technique returns an array as nicely. This implies we have to iterate over it, make certain we the photographs solely (therefore the test for the sort) after which use the helpful URL.createObjectURL technique, which takes the blob and generates an encoded URL that the img tag understands.

Lastly, there are three occasions that the Clipboard API handles: minimize, paste and replica and so they’re triggered when the consumer initiates any of these actions.

To provide you an concept of what you are able to do, let’s mess with our customers and forestall them from copying your web site’s content material. However as a substitute of merely disabling their capacity let’s mess them up a bit:

As you possibly can see, we will connect the occasion to a specific factor, so right here I’m ensuring you possibly can’t actually get something attention-grabbing out of my total web page. When the occasion triggers, I’m capturing the chosen textual content with doc.getSelection after which I shuffle that string. The steps required to take action are:

  1. Flip the string into an array of characters by splitting it per character.
  2. Shuffle the array by utilizing the kind technique with a random sorting operate.
  3. Be a part of the ensuing array again right into a single string.

Easy!

Then I manually set the content material of the clipboard with the shuffled string. That means they do get one thing, simply not one thing they’ll use (evil chuckle).

You are able to do related issues with the opposite two occasions, the restrict is your creativeness!

That’s all there’s for this 101, the clipboard is a really underutilized characteristic, however an easy one to grasp, so I hope you bought to see one thing new at the moment!

Do you will have any specific matter you’d like me to cowl on this 101 collection? Let me know and I’ll write an article about it!

More Posts