How to Create a Copy Button with JavaScript | Complete Clipboard API Guide for Beginners

3. Copying Text with JavaScript

JavaScript is a programming language that adds interactivity and dynamic behavior to web pages.

On this page, JavaScript is used to retrieve the text from a textarea when the user clicks the copy button, and then copy that text to the system clipboard.

The feature used in this example is the Clipboard API, specifically navigator.clipboard.writeText(). It is the recommended modern method for copying text and is supported by most current web browsers.

Example Code

function copyText(){

const text = document.getElementById("text").value;

navigator.clipboard.writeText(text);

}

Code Explanation

① function copyText()

This creates a function named copyText(). The function runs whenever the user clicks the copy button.

② document.getElementById("text").value

This retrieves the current text entered in the textarea whose ID is text.

③ navigator.clipboard.writeText(text)

This copies the retrieved text to the system clipboard.

How It Works

Click the 📋 Copy button.
The copyText() function is executed.
The text inside the textarea is retrieved.
The Clipboard API copies the text to the clipboard.
Paste the copied text anywhere using Ctrl + V (Windows) or ⌘ + V (Mac).

Key Points

JavaScript allows users to copy text with a single button click.
navigator.clipboard.writeText() is the recommended modern way to copy text.
The Clipboard API works in most modern browsers when the page is served over HTTPS.
This feature is commonly used on AI prompt websites, code snippet pages, documentation sites, and online tools.