Open In App

Web API Clipboard

Last Updated : 23 Nov, 2023
Improve
Improve
Like Article
Like
Save
Share
Report

Web API Clipboard is a powerful feature that allows web developers to interact with the user’s clipboard directly from a web application.

Concept and Usage

The Web API Clipboard provides a standardized way to interact with the user’s clipboard through JavaScript. It allows developers to perform the following key operations:

  • Copy: Programmatically copy text or data to the clipboard.
  • Cut: Cut selected text or data from a web page and copy it to the clipboard.
  • Paste: Paste data from the clipboard into a web application.

Interfaces

  • Clipboard: Represents the clipboard in a read-write manner. The Clipboard interface is at the core of clipboard interactions. It allows you to access and manipulate clipboard data.
  • ClipboardEvent: Provides access to clipboard data during clipboard events(cut, copy, paste). The ClipboardEvent interface is essential for handling clipboard-related events and managing data transfer between the clipboard and your web application.
  • ClipboardItem: It is used for representing a single item format and reading and writing data.

Web API Clipboard Methods

Two fundamental methods of the Web API Clipboard are:

  • writeText(text): Writes the specified text to the clipboard. This method is used to copy text to the clipboard. It accepts the text you want to copy as a parameter.
  • readText(): Reads text from the clipboard. This method allows you to retrieve text from the clipboard and use it in your web application.

Example 1: This example shows the use of the writeText() method.

Javascript




navigator.clipboard.writeText('Hello, Web Clipboard!')
    .then(() => {
console.log('Text copied to clipboard');
})
    .catch(err => {
console.error('Unable to copy text: ', err);
});


Example 2: This example shows the use of the readText() method.

Javascript




navigator.clipboard.readText()
    .then(pastedText => {
console.log('Pasted text: ', pastedText);
})
    .catch(err => {
console.error('Unable to paste text: ', err);
});


Browser Support

  • Chrome
  • Firefox
  • Safari
  • Edge


Similar Reads

Clipboard API in ElectronJS
ElectronJS is an Open Source Framework used for building Cross-Platform native desktop applications using web technologies such as HTML, CSS, and JavaScript which are capable of running on Windows, macOS, and Linux operating systems. It combines the Chromium engine and NodeJS into a Single Runtime. Sometimes developers would like more granular cont
12 min read
jQWidgets jqxGrid clipboard Property
jQWidgets is a JavaScript framework for making web-based applications for PC and mobile devices. It is a very powerful, optimized, platform-independent, and widely supported framework. The jqxGrid is used to illustrate a jQuery widget that shows data in tabular form. Moreover, it renders full support for connecting with data, as well as paging, gro
2 min read
How to Copy Text to the Clipboard in Next.js ?
In the article, we will explore how to integrate text copying to the clipboard in a Next.js application using JavaScript. In web de­velopment, the ability to copy te­xt to the clipboard holds immense value­. It empowers users to e­ffortlessly duplicate content and transfe­r it across different applications or documents. This conve­nient functionali
4 min read
How to Copy Text to the Clipboard in React Native ?
Mobile app de­velopment requires enabling text copying to the clipboard for se­amless content sharing and improved use­r experience­. A popular cross-platform framework, React Native, offers a solution to this common requirement. This article will guide develope­rs through implementing clipboard functionality using the @re­act-native-clipboard/clip
3 min read
How to copy text to the clipboard in React.js ?
Copying text to the clipboard in React JS is a common requirement in web applications, and React.js provides an easy way to accomplish this task. In this article, we will explore different methods to copy text to the clipboard in a React.js application. Prerequisite for React JS ClipboardNPM & Node JSstyled-componentsReact useState() hooksTable
4 min read
How to copy the text to the clipboard in JavaScript ?
Tothe copy the text to the clipboard in JavaScript we use document.execCommand() method. This can be done by following the below-mentioned approach. Syntax:function GeeksForGeeks() { /* Get the text field */ let copyGfGText = document.getElementById("IdOfTextToCopy"); /* Select the text field */ copyGfGText.select(); /* Copy the text inside the tex
2 min read
Clipboard App using React-Native
In this tutorial, we will create a stylish clipboard app using React Native. The app allows users to copy text to the clipboard, paste text from the clipboard, and display a stylish popup message to indicate successful copy or paste actions. Preview of final output: Let us have a look at how the final application will look like. [caption width="800
3 min read
Python script to open a Google Map location on clipboard
The task is to create a python script that would open the default web browser to the Google map of the address given as the command line argument. Following is the step by step process:  Creating the Address_string from command line input : Command line arguments can be read through sys module. The sys.argv array has the first element as the filena
3 min read
How to create copy to clipboard button ?
A copy-to-clipboard button enables users to quickly copy text or content to their device's clipboard for easy pasting elsewhere. It's typically created using HTML for the button and JavaScript to handle the copy functionality, accessing and modifying clipboard data using the Clipboard API. Using navigator.clipboard.writeText()This approach employs
3 min read
Differences between Web Services and Web API
Web Services: A Web services are any bit of services that makes it accessible over the Internet and normalizes its correspondence through XML encoding. A customer conjures web services by sending a solicitation (for the most part as an XML message), and the services send back an XML response. Web services summon communication over a network, with H
3 min read