Trusted answers to developer questions
Trusted Answers to Developer Questions

Related Tags

javascript
web
api
communitycreator

What is the Clipboard Web API?

Chidume Nnamdi

Grokking Modern System Design Interview for Engineers & Managers

Ace your System Design Interview and take your career to the next level. Learn to handle the design of applications like Netflix, Quora, Facebook, Uber, and many more in a 45-min interview. Learn the RESHADED framework for architecting web-scale applications by determining requirements, constraints, and assumptions before diving into a step-by-step design process.

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.

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.

RELATED TAGS

javascript
web
api
communitycreator

Grokking Modern System Design Interview for Engineers & Managers

Ace your System Design Interview and take your career to the next level. Learn to handle the design of applications like Netflix, Quora, Facebook, Uber, and many more in a 45-min interview. Learn the RESHADED framework for architecting web-scale applications by determining requirements, constraints, and assumptions before diving into a step-by-step design process.

Keep Exploring