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:
{{< image title=“” w=“” h=“” o=“webp q100” p=“center” c=“rounded” src=“images/clipboard.png” alt=“HTML Input”>}}
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>
Topics
Discussion (Loading...)
Join the Discussion
Sign in to share your thoughts and engage with the JavaScript Today community.
