The web keeps growing and getting more sophisticated. As a result, more support is being poured into the web, giving it the ability to do things native to the operating system.
In this shot, we look into the Clipboard API.
The Clipboard API enables us to copy and read data from a webpage on the system’s clipboard. It also allows us to listen to and respond to clipboard commands such as copy, cut, and paste.
This API is accessed through the navigator object:
navigator.clipboard
It contains methods for reading and writing from the system clipboard:
read: reads data from the system clipboard. It returns a Promise which resolves to a DataTransfer object that provides the data.
readText: Reads text from the system clipboard, returns a Promise that resolves to DOMString containing the clipboard’s text.
write: Writes data to the system clipboard.
writeText: Writes data to the system clipboard.
To copy data to the clipboard, we will use either the write or writeText methods:
// copies "23" to clipboard
navigator.clipboard.write(23).then(text => { log(text) })
// copies "nnamdi" to clipboard
navigator.clipboard.writeText("nnamdi").then(text => { log(text) })
To read data from the clipboard, we will use either the read or readText method:
// read method
navigator.clipboard.read().then(data => { log(data) })
// readText method
navigator.clipboard.readText().then(text => { log(text) })
To play with a live demo, visit here.
Type on the input box and click the Copy button, this will copy the data in the input box to the clipboard.