How to Copy Text to Clipboard with JavaScript
You might have seen some websites that allow you to click a button to copy some contents to the clipboard. You might have wondered how this is accomplished. Let’s take a look.
HTML File Structure
We’re going to start with a basic HTML structure, like so:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body></body>
</html>
Now, for this article, we’re going to copy the contents from an input tag, so let’s add it to the document, with an id of #myInput.
<body>
<input type="text" id="myInput" />
</body>
The id is important. It’s what we’re going to use to tell our JavaScript code what to select.
Next, we should add a button that executes our function when it’s clicked.
<body>
<input type="text" id="myInput" />
<button onclick="copyToClipboard()">Copy</button>
</body>
If you open this file in the browser, it should now look like this:
Adding our script
Now that the HTML is complete, we can focus on writing the copyToClipboard function. But first, let’s add <script></script> tags to our document, right above the closing </body> tag:
<body>
<input type="text" id="myInput" />
<button onclick="copyToClipboard()">Copy</button>
<script>
// Code here
</script>
</body>
The last step is to write our function within the <script> tags. Let’s do that now.
<body>
<input type="text" id="myInput" />
<button onclick="copyToClipboard()">Copy</button>
<script>
const copyToClipboard = () => {
const copyText = document.getElementById("myInput");
copyText.select();
document.execCommand("copy");
};
</script>
</body>
The function will execute when the button is clicked, selecting the text in the input bar and copying it to the clipboard.
Full Code Example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<input type="text" id="myInput" />
<button onclick="copyToClipboard()">Copy</button>
<script>
const copyToClipboard = () => {
const copyText = document.getElementById("myInput");
copyText.select();
document.execCommand("copy");
};
</script>
</body>
</html>
Update
One of our readers, Krishna Neupane, has pointed out that the above uses execCommand, which is deprecated. Below is an updated version using the clipboard API.
<input type="text" id="myInput" />
<button onclick="copy()">Copy</button>
<script>
const copy = () => {
let text = document.getElementById("myInput");
text.select();
navigator.clipboard.writeText(text.value);
};
</script>
Related Posts
The Art of Data Visualization: Exploring D3.js
Data is everywhere, flowing into our applications from various sources at an unprecedented rate. However, raw data alone holds little value unless it can be transformed into meaningful insights.
Read more
JavaScript’s Secret Weapon: Supercharge Your Web Apps with Web Workers
During an interview, I was asked how we could make JavaScript multi-threaded. I was stumped, and admitted I didn’t know… JavaScript is a single-threaded language.
Read more
Creating a NodeJS Budgeting Tool
In this article, we’re going to show you how to read and write to a .txt file using NodeJS by creating a small budgeting CLI (Command Line Interface).
Read more