Skip to content

JavaScript copy to clipboard without input

  • by

Copying text to the clipboard in JavaScript without user input can be achieved using the Clipboard API. This API allows developers to read and write data to the system clipboard. To copy text to the clipboard, the following steps can be taken:

Create a new ClipboardItem object with the text to be copied:

const text = "This text will be copied to the clipboard";
const item = new ClipboardItem({ "text/plain": new Blob([text], { type: "text/plain" }) });

Call the write() method of the navigator.clipboard object and pass in the ClipboardItem:

navigator.clipboard.write([item]).then(() => {
    console.log("Text copied to clipboard");
}).catch((error) => {
    console.error("Error copying text: ", error);
});

This will copy the text to the clipboard without requiring any user input.

JavaScript copy to clipboard without input example

Simple example code.

<!DOCTYPE html>
<html>
<head>
    <title>Copy to Clipboard Example</title>
    <script>
        function copyToClipboard() {
            const text = "This text will be copied to the clipboard";

            navigator.clipboard.writeText(text).then(() => {
                console.log("Text copied to clipboard");
            }).catch((error) => {
                console.error("Error copying text: ", error);
            });
        }
    </script>
</head>
<body>
    <button onclick="copyToClipboard()">Copy Text</button>
</body>
</html>

Output:

JavaScript copy to clipboard without input

A function called copyToClipboard() that uses the writeText method of the Clipboard API to copy plain text to the clipboard. When the user clicks on the button on the HTML page, the function is called and the text is copied to the clipboard.

Do comment if you have any doubts or suggestions on this Js topic.

Note: The All JS Examples codes are tested on the Firefox browser and the Chrome browser.

OS: Windows 10

Code: HTML 5 Version

Leave a Reply

Discover more from Tutorial

Subscribe now to keep reading and get access to the full archive.

Continue reading