This is by far the easier way I have seen to copy text to clipboard when a button is clicked. This is for Javascript devs.
You can use this to create a Copy to Clipboard button on your javascript site or app.
I believe in practical learning so let us just build something small that shows this in use.
Let us create a very simple HTML document that where you can type a string as input and display the text in a paragraph by clicking a button. Then you will use another button to copy the paragraph to your computer's or phone's clipboard.
We will not style this and our javascript will be on same file for simplicity and speed.
<!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>Copy To Clipboard</title>
</head>
<body>
<h1>Simple example of copy text to clipboard using Javascript </h1>
<input placeholder="Type text" id="textInput">
<button>Save This</button>
<p id="savedText"></p>
<button>Copy This</button>
<script>
</script>
</body>
</html>
Intentionally left the Script tag empty. That is where our javascript will be written.
We will now write the first Javascript code inside our script tag that will grab the text that is entered in the text input space (id ="textInput") and display it inside the paragraph with id "savedText" which is currently empty.
Next, we will add an onClick function invocation to the "Save" button in our html.
<!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>Copy To Clipboard</title>
</head>
<body>
<h1>Simple example of copy text to clipboard using Javascript </h1>
<input placeholder="Type text" id="textInput">
<button onClick="saveText()" >Save This</button>
<p id="savedText"></p>
<button>Copy This</button>
<script>
function saveText(){
document.getElementById("savedText").innerText = document.getElementById("textInput").value
}
</script>
</body>
</html>
If you run this on your browser now, you will see that when you make an input and click on the "Save" button, the text you typed will be displayed below the save button.
The save button is calling a function "SaveText()". What this does is to take the value(ie, content) of the text input field and use it to replace whatever is in the inner text of the paragraph with id="savedText", whether an empty space or another text.
I know you may already know all these but I need to make it as simple as possible for even the absolute beginner😉.
Next, we create the function that actually does the copying to clipboard in Javascript. You can place this under the first function still inside your script tag:
const copyToClipboard = (text) => {
navigator.clipboard.writeText(text)
}
Note that we gave it the parameter "text". This will be replaced with a variable (an argument) whose value will be the text saved in our "savedText" paragraph.
Next, Create a function that is called when the "Copy" button is clicked. We name this function "copy". Write this under the previous function.
function copy() {
const textToCopy = document.getElementById("savedText").innerText;
copyToClipboard(textToCopy)
console.log(textToCopy)
}
Above: inside the function, we first created a variable named "textToCopy" and made it's value to be the text we grab from our "savedText" paragraph.
Then we use "textToCopy" as an argument when we call our earlier function: *copyToClipboard *. If you are new to this, this is called calling a function inside another function.
Finally, we go back to our "Copy this" button in the html and make it to call the copy() function whenever it is pressed.
<button onClick="copy()"> Copy This </button>
Putting it all together,
We will have this as our complete code:
<!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>Copy To Clipboard</title>
</head>
<body>
<h1>Simple example of copy text to clipboard using Javascript </h1>
<input placeholder="Type text" id="textInput">
<button onClick="saveText()">Save This</button>
<p id="savedText"></p>
<button onClick="copy()"> Copy This</button>
<script>
function saveText() {
document.getElementById("savedText").innerText = document.getElementById("textInput").value
}
const copyToClipboard = (text) => {
navigator.clipboard.writeText(text)
}
function copy() {
const textToCopy = document.getElementById("savedText").innerText;
copyToClipboard(textToCopy)
alert("Text copied to clipboard")
}
</script>
</body>
</html>
I hope this helps someone out there. You can follow me on Twitter or BuyMeACoffee
Top comments (0)