Sometimes I use sites that provide something I need to copy and paste somewhere. Maybe an API key. Maybe an activation token for an application I just bought.
Anyway, they let you click inside a box, and the text inside it is copied to the clipboard, so I can directly go and paste it somewhere.
How can we implement that functionality in our sites? Using the Clipboard API!
There’s another way to make copy/paste work, using the
document.execCommand() functionality. I’m not going to cover that option here. The Clipboard API is meant to be the successor of that command.
The Clipboard Web API doesn't have this limitation. From version 57 onward, you can copy images to the clipboard using the clipboard.setImageData API. Support for the Clipboard API's navigator.clipboard.writeText method was added in Firefox 63. When using content scripts, the Clipboard API is available only for HTTPS pages. Clipboard.js allows us to create a copy to clipboard feature for our websites without using flash. In this tutorial, we will be creating a button that once clicked copy's a value. This could be a Minecraft IP or any value you want the user to be able to copy quickly.
Blocs 3 0 4 – visual web design tool. The Clipboard API is available on the
navigator.clipboard object:
The Clipboard API is relatively recent and not all browsers implement it. It works on Chrome, modern Edge (chromium-based), Firefox and Opera.
You can check for the existence of this object to make sure the functionality is implemented:
One thing you must now understand is that you can’t copy / paste from the clipboard without the user’s permission.
The permission is different if you’re reading or writing to the clipboard. In case you are writing, all you need is the user’s intent: you need to put the clipboard action in a response to a user action, like a click.
Writing to the clipboard
Say you have a
p element in an HTML page:
You create a click event listener on it, and you first check if the Clipboard API is available:
Now, we want to copy the content of that
p tag to the Clipboard. We do so by looking up the innerText of the element, identified by event.target :
Next, we call the
navigator.clipboard.writeText() method, wrapping it in a try/catch to handle any error that might happen.
This is the full code of the example:
Here you can see and try the example in Codepen
Copy To Clipboard Javascript Chrome
See the Pen A Clipboard API Write example by Flavio Copes (@flaviocopes) on CodePen.
Reading from the clipboard
Here’s how to read from the clipboard. Maxsnap 1 58. We have a
p element:
and when clicking it we want to change the element content with the content stored in your clipboard.
First we create a click event listener and we check for the Clipboard API availability:
C# Copy Text To Clipboard
Then we call
navigator.clipboard.readText() . Using async/await we store the text result into a text variable and we use it as the event.target.textContent value:
The first time you execute this code on your site, you’ll see this box appearing:
You need to grant the permission to the site to read from the clipboard, otherwise if any site could read your clipboard without your explicit permission it would be a huge security issue.
See it on Codepen:
See the Pen A Clipboard API Read example by Flavio Copes (@flaviocopes) on CodePen.
Copy To Clipboard Json
Download my free JavaScript Beginner's Handbook
ClipboardyComments are closed.
|
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |